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?

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:



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?

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.

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:



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?

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.

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:

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.

Excellent, thanks for posting back James.