WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to change color links in posts and pages, excluding headers (8 posts)

  1. cjboertjens
    Member
    Posted 6 years ago #

    Hello,

    I want to change to colours of how the links display in my posts and pages, but everytime I change something in the stylesheet it also changes to colour of the links of the headers (index menu on the top) and categories on the side. Is there a way I can only change the link colour of the links on the pages and posts and keep all the other links as they are?

    Thanks,

    Cornelis

  2. Ivovic
    Member
    Posted 6 years ago #

    sure, that's pretty easy.

    Add a couple of entries in your css that look something like:

    .entry a {
        color: #FF8800;
        }
    .entry a:hover {
        color: #88FF00;
        }

    this will change the link (and hover) colour for links found in the .entry section only.

  3. cjboertjens
    Member
    Posted 6 years ago #

    Hi Ivovic,

    Thanks for your reply. I added that code to my style.css sheet on the bottom, just before:
    /* End Structure */
    /*****************/

    However, it did not change anything to the link settings in the post or pages (or anywhere else). Do I need to use something else instead of ".entry"?

    Thanks!

  4. Ivovic
    Member
    Posted 6 years ago #

    it will depend on your existing theme, and what the class names for the containing elements are.

    it'll help if you look inside your theme's index.php, and note the containing elements closest to the line that says "the_content"

    for instance, you'll have a whole bunch of <div> this, and <div> that tags... find the_content, and work back to the <div class="whatever"> tag which is closest to it, then take note of the class name.

    then use that classname in place of .entry, so it'll be:

    .whatever a {
        color: #FF8800;
        }
    .whatever a:hover {
        color: #88FF00;
        }

    you may also want to check for an existing reference to that in your CSS, to avoid possible duplicates.

  5. cjboertjens
    Member
    Posted 6 years ago #

    I use vSlider as the theme. I can find <div id="content"> in the index.php, but nothing that relates to <div class="whatever">. However, when I had a look on the post.php I came across <class="post-body>. Can that be it, or does it have to be listed in the index.php?

    I also tried to add this to the style_content.css file in the theme and all the links in the content changed, however, it also caused the headers of each post to display like that as well:

    #content a {
    color: blue;
    text-decoration: underline
    }

    #content a:hover {
    color: red;
    text-decoration: none
    }

    #content a:visited {
    color: purple;
    text-decoration: underline

    Getting close I think...

    Thanks

  6. Ivovic
    Member
    Posted 6 years ago #

    well, themes can either follow some basic conventions, or not... it's really up to the theme author.

    Those who choose not to follow these conventions really should have a good reason to deviate - but most of them don't.

    Anyway, if your theme has a post.php, and the post content is in there, then that's the place you should be looking for the surrounding DIV tags.

    you say there's an entry in there with a class of "post-body", I'd start there.

    try:

    .post-body a {
        color: #FF8800;
        }
    .post-body a:hover {
        color: #88FF00;
        }

    It'll just take some digging in your theme to find the right (most specific) DIV to use.

    And if there isn't one specific enough, you can add one yourself... as I mentioned earlier, search for:

    <?php the_content('......'); ?>

    Attempt to use the closest div tag to that, but if there isn't one, make this line look similar to:

    <div class="myNewClassName"><?php the_content('......'); ?></div>

    then you can use:

    .myNewClassName a {
        color: #FF8800;
        }

    in your CSS.

  7. cjboertjens
    Member
    Posted 6 years ago #

    Thanks for that Ivovic! The closest one to the:

    <?php the_content('......'); ?>

    was called "slidebox", so I made the changes in the style-slidebox.css and it worked perfectly.

    Thanks for all your help, really appriciate it!

    Cornelis

  8. Ivovic
    Member
    Posted 6 years ago #

    sounds like a pretty complicated theme there, with multiple css files, etc...

    glad you found your way around in the end :)

    Cheers.

Topic Closed

This topic has been closed to new replies.

About this Topic