Change menu color with CSS

Home Forums Older releases 0.9.x Change menu color with CSS

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1299
    Topshed
    Participant

    Hi,
    I want to change my menu color to Red for my londonbus site
    I thought I could do it by modifing SM_clear but I have had no luck.

    I can make some of the menu backgroundr Red but changing the text color to #fff; has me beat

    My second tought was to try and use one of the many available in SM v6.0.4

    Would that be an easier option perhaps

    Your advice would be most welcome

    Regards Topshed

    #1520
    admin
    Keymaster

    Hi, you need to edit the color declaration in the following rules:

    /* Menu items
    ===================*/
    
    	.sm-clean a {
    		padding:12px;
    		color:#555;
    		font-size:18px;
    		line-height:17px;
    		font-family:'Lucida Sans Unicode','Lucida Sans','Lucida Grande',Arial,sans-serif;
    		text-decoration:none;
    	}
    	.sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active,
    	.sm-clean a.highlighted {
    		color:#D23600;
    	}
    
    	/* ... */
    
    	.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active,
    	.sm-clean ul a.highlighted {
    		color:#D23600;
    		background:#eee;
    	}
    	/* current items - add the class manually to some item or check the "markCurrentItem" script option */
    	.sm-clean a.current, .sm-clean a.current:hover, .sm-clean a.current:focus, .sm-clean a.current:active {
    		color:#D23600;
    	}
    

    Also possibly the responsive styles further down in “sm-clean.css”:

    /* Menu items
    ===================*/
    
    	.sm-clean a {
    		padding:13px 5px 13px 28px !important;
    		color:#555 !important;
    		background:transparent !important;
    	}
    	.sm-clean a.current {
    		color:#D23600 !important;
    	}

    As for the old styles in v6.0.4, they are defined in a completely different way in the JS config file so they are not compatible at all.

    Cheers!

    #1522
    Topshed
    Participant

    Thank you for your input, unfortunatly your CSS is the same as came with my original download, so there was no change of background or foreground colors

    My only changes that have worked for me is in the font size in smclean a
    see below

    
    	.sm-clean a {
    	/*	padding:10px;*/
    		padding:5px;
    		color:#555;
    	/*  font-size:18px;*/
    		font-size:12px;			
    	/*  line-height:17px;*/
    	    line-height:13px;
    		font-family:'Lucida Sans Unicode','Lucida Sans','Lucida Grande',Arial,sans-serif;
    		text-decoration:none;
    	}

    I have a further thought,
    Please, do you have a smart piece of code to let me load the menu at the top of every page with an include. it would fix all my problems and I could do away with Iframes which are doing my head in ??

    Regards Topshed

    #1523
    admin
    Keymaster

    Please read carefully again what I wrote:

    you need to edit the color declaration in the following rules

    I just showed you the rules you need to edit, the colors you would like to use are up to you. If you need further help, please check the CSS spec.

    You could use a server-side include for your menu structure so that you could keep it in a single separate file. For example, in PHP it could be achieved via the include function. If your server supports other server-side languages, please check how you could do it with those.

    #1528
    Topshed
    Participant

    I have my menu working in a Iframe, the Iframe is set to to 1280px wide and the menu fills the width of the Iframe

    Calling the same menu at the top of a page produces the menu but it does not work

    However the second example works if the iframe is present.
    Loading the page on it’s own shows the menu but it does not work

    Any thoughts a to why please

    #1529
    Topshed
    Participant

    whoops also tried

    #1530
    admin
    Keymaster

    If the menu HTML structure is in the following file:

    /home4/topshed/public_html/smartmenus/lhc_clean.php

    you could use the following on your PHP pages (they need to have a .php extension too) to include it:

    <?php
    	include '/home4/topshed/public_html/smartmenus/lhc_clean.php';
    ?>

    If this doesn’t work, then you have something else that is not correctly configured but, unfortunately, I cannot guess what exactly it might be without looking at a complete code sample.

    #1537
    AliE
    Participant

    Hi,

    Firstly ….. really like the menu !!

    I’ve incorporated the “Simple” menu into my website. I wanted to change background and text colours and I used the notes posted here with some success. I managed to change Background and Text colours for the normal state menus and also for the hover state, however I am having more trouble changing the colours for the reduced size menus (responsive). I checked the rules posted above concerned with colour declarations, I have changed responsive normal state text colour but I really cant see why my background and hover states haven’t changed. Could you shed some light on this for me please ?

    Thanks.

    #1540
    admin
    Keymaster

    Hi,

    Glad you like the script!

    The “sm-simple” theme doesn’t have hover styles for the responsive menu by default. I.e. you have just the following by default:

    	.sm-simple a {
    		padding-top:13px;
    		padding-bottom:13px;
    		background:transparent !important;
    		color:#555 !important;
    	}

    If you like, you could add hover styles by editing the above like this:

    	.sm-simple a {
    		padding-top:13px;
    		padding-bottom:13px;
    		background:#fff;
    		color:#555;
    	}
    	.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active,
    	.sm-simple a.highlighted {
    		background:#bbb;
    		color:#fff;
    	}

    However, note that on mobile touch devices the hover effect is sticky and if you ask me it really works better without it.

    Cheers!

    #1542
    AliE
    Participant

    Ahhhh …. thanks a lot. Too much going on in my head !! I never thought about hover status on a mobile ;( Of course you are right, and thanks very much for the advice.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?