WordPress.org

Ready to get started?Download WordPress

Forums

How do I override one of my theme's appearance codes?? (8 posts)

  1. littletancred
    Member
    Posted 2 years ago #

    For reference, my site is: http://www.waffledaysahead.com

    When you scroll the cursor over each self-drawn menu button (they are classified as "services" in my dashboard), there appears a circle with an orange middle. I would like to either a.) get rid of that alternation altogether, or b.) replace it with a 139x139 pixel jpeg of my own-- upload an image similar to the ones that already represent each button. How do I change the coding to make this change?

    Any insight would be deeply appreciated-- I am fairly CSS/HTML coding illiterate :(

    Thank you,
    Rebeccah

  2. s_ha_dum
    Member
    Posted 2 years ago #

    The image is here: http://www.waffledaysahead.com/wp-content/themes/peachfolio/img/service.png It is part of a CSS rule at about line 298 of your style.css. The orange color is further down the same stylesheet. Look for background-color: #E6A865;

    You can 1) remove the #services li a:hover rule or 2) replace the image.

  3. littletancred
    Member
    Posted 2 years ago #

    Hi! Thank you so much for your help. I tried to erase the following code as you indicated (the hover rule):

    #services li a:hover {
    	height:81px;
    	width:90px;
    	padding:58px 24px 0 25px;
    	text-indent:0;
    	line-height:16px;
    	text-align:center;
    	text-decoration:none;
    	font-family:'RangerRegular', Arial, sans-serif;
    	font-size:14px;
    	color:#ffffff;
    	background-image:url(img/service.png);
    }

    ...unfortunately, after I updated my theme, there were no changes, and the hover still operated. Is there something else I should be deleting as well?

    Thank you again, I really appreciate the guidance.

    Rebeccah

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    try to add your own rules for the hover buttons, in the same way as you have done for the menu buttons;

    example:

    #services a.service_1:hover {
    			background-image: url("http://www.waffledaysahead.com/wp-content/uploads/2012/08/poster-art-tiny-label-hover.jpg");
    		}

    if you have more problems with your theme, please contact themeforest as the seller of your commercial theme for support.

  5. Japh
    Member
    Posted 2 years ago #

    Hi LittleTancred,

    If you do need to contact the author of your theme for support, you can do so from the contact form on the author's profile page on ThemeForest. In the case of this theme, the author's profile page is here: http://themeforest.net/user/scripteers

  6. s_ha_dum
    Member
    Posted 2 years ago #

    That rule is still in the stylesheet. You didn't delete it.

    http://www.waffledaysahead.com/wp-content/themes/peachfolio/style.css

  7. littletancred
    Member
    Posted 2 years ago #

    First of all, thank you so much for the directions/support, this has been a life-saver (insofar as creating a website constitutes my life).

    @s_ha_dum: you are correct, I had re-pasted the info back into the stylesheet after I saw there were no changes because I was afraid of sending the entire design into upheaval. I tried deleting it again this morning with better luck-- I didn't realize it takes some time for the site to update the info so that it appears on the homepage.

    @Japh: Yes! I contacted scripteers, thank you- I would not have even thought of that as an option.

    @alchymyth The Sweeper: This is great to know, and ultimately what I am looking to implement! I tried your method and it looked very cool. My only follow-up questions is--- do you know how to write the code to make the image behind each button different? The theme originally was able to do this with text, so I wonder if I could do the same thing with uploaded jpegs?

    Thank you all again, so much! You have no idea how huge a relief it is find help in mysterious expanses of web-coding, completely foreign to me.

    Rebeccah

  8. s_ha_dum
    Member
    Posted 2 years ago #

    I didn't realize it takes some time for the site to update the info so that it appears on the homepage.

    Hit CTRL+SHIFT+R to force the browser cache to get flushed when the page reloads, or disable browser caching while you work on the site. I think, but am not 100% sure, that this works in all three major browsers. On Macs it the 'Apple' key, not CTRL, I believe.

Topic Closed

This topic has been closed to new replies.

About this Topic