Using icons

User 2662823 Photo


Registered User
7 posts

Hi,

I am slowly getting to grips with RLMP and was recently looking through the auto generated css files and noticed references to icons.

I have successfully added an icon to a button in a column with a rollover effect and the icon changes from Black to White when the column changes.

I would like to change the default color of the icon from black to one in keeping with the rest of the site design but I cannot get it to change and having a basic grasp of css is making it even more difficult.

HTML -

<div class="row row-4">
<div class="coffee-span-12 column-4">
<div class="subgrid">
<div class="row">
<div class="coffee-span-4 servicesblock">
<img class="image-1-1 image-1" src="img/image-1x1.svg" alt="Image">
<i class="icon-4x icon-newspaper" font></i>
<h3 class="heading-3">Services</h3>
<p class="paragraph paragraph-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at purus quam. Suspendisse tincidunt lobortis est eu efficitur.</p>
</div>
...

I have managed to change the color of the icon by changing 'coffeegrinder.min.css' [class*=icon-]
But this changes both icon states and i have had the same result if I change [icon-4x] and [icon-newspaper]

Can anyone tell me where I add the color information in the css to change all the icons normal and rollover?

User 2088758 Photo


Senior Advisor
3,086 posts

Hi there James,

First thing I want to mention to you is do not change anything int he coffeegrinder css as it will be overwritten everytime you make an update in RLMP. What you want to do is create a custom.css stylesheet and put it in the same folder as the others. Then you need to place this in the header of your RLM project:

<link rel="stylesheet" href="css/custom.css">


Any edits to the css should be done in this file.

Secondly can you please provide a link to your website so we can analyze your code to better assist you?

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2662823 Photo


Registered User
7 posts

Thanks for the quick response.

Custom.css makes sense to me, thanks for the tip.
Would I be right in thinking that this will automatically overwrite the same definitions in other .css files providing it is the last one loaded?

The page in question can be found at
http://www.squigglefish.co.uk

Please note this is ideas thrown together and is my first attempt at adding other features (Slider and Menu) so the folder structure is a mess.

What I would ideally like is the icon to be change to white when active (as it is currently) but be gold when inactive. In this example it is purely cosmetic but I am trying to create a multipage template to compliment a clients single page site they currently have. There current site is full of fancy effects and extras and has several .css files that are over 6000 lines long. I decided that my time would be better spent getting to grips with RLMP, Menu Builder etc. than blindly going through the existing site.
User 2088758 Photo


Senior Advisor
3,086 posts

Yes you are exactly right! Any changes you make in any of the css files that RLM produces will be overwritten when you export the next time so keeping your css changes in the custom.css file will help you manage the project a lot better. RLM will not overwrite any css files that you create.

Ok to address your other issues...

You are going to want to change this class in your custom.css:

icon-4x icon-newspaper


I don't have time to go into detail right now but I can have a better look at it tonight. But that should give you a hint on where to start.

Edit**** I just noticed you wanted to change all the icons. I guess I need a little more help understanding what your goal is. Can you go into a little more detail on what you are trying to achieve?

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2662823 Photo


Registered User
7 posts

Hi Steve,

I really appreciate your help with this.

I want to change the effect for all the icons if possible and I was hoping that I could make a change or two higher up the icon chain to change them all at once.

Incidentally, I believe the one page site they are currently using is

http://themestrong.com/demo/wp_argo/

Whilst I'm not expecting to be able to do everything this site does, I want to try and keep a similar look and feel.
User 2088758 Photo


Senior Advisor
3,086 posts

Ok so I think I understand your issue.

I haven't had time to test it but what you may want to try adding in your custom.css file is this:

[class*=" icon-"]:before, [class^=icon-]:before {

Make changes to before state color here.

}
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2662823 Photo


Registered User
7 posts

Hi Steve, sorry for the delay.

Managed to sort the issue by using the code below which changed all the icons. Thanks for pointing me in the right direction.

.subgrid > .row > [class*='coffee-span-'].servicesblock:hover > [class*=" icon-"] {
color: #ffffff;
}



User 2088758 Photo


Senior Advisor
3,086 posts

Excellent, thanks for posting back James.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.