#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0

    Different link styles in a single template


    Hello everyone,

    I've come across another problem that I can't seem to find an answer anywhere.

    I am working on a template in Joomla! (atomic), and would like to have the links to each article's title to have a black text on a yellow background.

    At first I have succeeded by editing the screen.css file into:

    Code:
    /* Title Links */
    a:focus, a:hover {color:#fff;text-decoration:none;}
    a {color:#121212;text-decoration:none;background-color:#ffc21f;}
    But after a while I realized that it was a mistake as it made every link to have a yellow text background as opposed to just the titles of each article.

    I think I found the part to edit which was in another file (Template.css) and it goes like this:

    Code:
    /* Text styles */
    .blog-featured h2 {
      font-size: 1.5em;
      margin-bottom:0em;
    }
    My question is, how should I modify the code above so that only the titles have a Yellow background on the text?

    Thanks for the time and I hope that someone can help me.


    Regards
  2. #2
  3. Administrator
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    47
    Rep Power
    10

    Be more specific


    provide that your title links are wrapped inside of your h2:

    Code:
    .blog-featured h2 a:focus, a:hover {color:#fff;text-decoration:none;}
    .blog-featured h2 a {color:#121212;text-decoration:none;background-color:#ffc21f;}
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    Hi Paul,

    Thanks for the advice. Unfortunately, it didn't work. I am not sure if the title links are wrapped inside the h2 as the code is in a different file.

    Whenever I change the h2 though like the font size from "1.5em" to "3em" the title links do get bigger so I was pretty sure I was barking at the right tree. I'm not sure why the code you gave didn't work. Here is how I placed your code next to the h2:

    Code:
    /* Below are the CSS styles that aren't included with Blueprint. It's a good idea to keep them whether or not you use it unless you know what you're doing. */
    
    /* Text styles */
    .blog-featured h2 {
      font-size: 1.5em;
      margin-bottom:0em;
      line-height:1;
      
    .blog-featured h2 a:focus, a:hover {color:#fff;text-decoration:underline;}
    .blog-featured h2 a {color:#121212;text-decoration:none;background-color:#ffc21f;}
    Also, you mentioned to provide more details. Can you please be more specific as to what details you might need for my problem?

    Thanks again. I do appreciate you making effort.


    Regards
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    Can you not give those special links a class then manage the appearance of that class?

    I.e.,
    <a class="myspeciallink" ...></a>

    CSS:
    .myspeciallink {background-color:yellow; color:black; }
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    Hi EEsterling,

    Actually that was my first idea. I wish I could do that, but the <a> codes for titles are generated by Joomla (thru article manager) and I have no idea where they are placed. And if even I could find them, editing code for every article kind of defeats the purpose for using a CMS. And some authors might not be that familiar with CSS.

    Thanks
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    I was afraid that might be the case. Since you said changing .blog_featured h2 a "didn't work", can you use a tool like firebug that makes it easy (or do this manually) to inspect the CSS selectors that apply to your links and see what the ones you want to change have in common?

    The fact that you identified .blog_featured h2 as a potential target suggests that you were close. You just need to take it another step to find the common path to the links.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    I'm not familiar with Firebug, but I just checked it and I will definitely give it a try.

    What's a little frustrating is that I already found the .blog-featured h2 but I can't seem to make the link styles work.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    So, after checking out Firebug, I realized I was barking at the wrong tree. The blog-featured h2 was overridden by another code (except for the size, which is why I was able to change it earlier).



    My conclusion now is that both title links and the regular links depend on this code:

    Code:
    a:focus, a:hover {color:#fff;text-decoration:none;}
    a {color:#121212;text-decoration:none;background-color:#ffc21f;}
    On top of my mind I would like to make a separate class for the titles, like the one suggested by EEsterling below:

    Code:
    .titlelink {background-color:yellow; color:black; }
    The only problem now is I have no means to assign that class to the titles as they are generated by Joomla. Is it possible to assign a style per module? I've seen this code from another thread of similar problem and thought it might apply to me:

    Code:
    table.moduletable-login td a {
    color: #888888;
    }
    That's a different module but I hope you know what I mean. Thanks and I'm so sorry for making this long.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    If you cannot identify some common feature of the links you want to change, I think you've officially crossed into Joomla specific territory, so I cannot help. You might want to put JOOMLA in your thread title to inspire Joomla people to check in (or ask on a Joomla forum).

    In the meantime, check the CSS Selectors documentation, http://www.w3.org/TR/CSS2/selector.html , and see if it inspires you to think outside the norm in finding a selector. E.g., maybe you can use an attribute selector on href?
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0
    That's what I thought so too. Man, I thought I was close to figuring it out.

    I appreciate you taking time to answer my queries, thank you.
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    9
    Rep Power
    0

    Resolved finally!


    Just to update this, I was finally able to solve my problem.

    Paul was right, I had to place the following parameters into my sheet, only I messed it up by placing it inside the .blog-featured
    Code:
    /* Text styles */
    .blog-featured h2 {
      font-size: 1.5em;
      margin-bottom:0em;
      line-height:1;
      
    .blog-featured h2 a:focus, a:hover {color:#fff;text-decoration:underline;}
    .blog-featured h2 a {color:#121212;text-decoration:none;background-color:#ffc21f;}
    Its been 7 years since I last played with codes so I guess I kind of lost an eye in coding.

    Thanks to all who helped and for taking time to answer. Merry christmas!

IMN logo majestic logo threadwatch logo seochat tools logo