Different link styles in a single template

Dev Shed Forums Sponsor:

December 21st, 2012, 08:43 AM

redstep

Registered User

Join Date: Dec 2012

Posts: 9

Time spent in forums: 2 h 52 m 56 sec
Reputation 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

December 21st, 2012, 12:39 PM

Paul-Ninja

Contributing User

Join Date: Jun 2012

Location: Troy, NY

Posts: 36

Time spent in forums: 15 h 30 m 48 sec
Reputation Power: 66

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;}

December 21st, 2012, 03:54 PM

redstep

Registered User

Join Date: Dec 2012

Posts: 9

Time spent in forums: 2 h 52 m 56 sec
Reputation 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

December 21st, 2012, 04:40 PM

EEsterling

Contributing User

Join Date: Feb 2011

Posts: 97

Time spent in forums: 1 Day 18 h 28 m 56 sec
Reputation Power: 49

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; }

December 21st, 2012, 08:47 PM

redstep

Registered User

Join Date: Dec 2012

Posts: 9

Time spent in forums: 2 h 52 m 56 sec
Reputation 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

December 21st, 2012, 10:56 PM

EEsterling

Contributing User

Join Date: Feb 2011

Posts: 97

Time spent in forums: 1 Day 18 h 28 m 56 sec
Reputation Power: 49

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.

December 22nd, 2012, 04:05 AM

redstep

Registered User

Join Date: Dec 2012

Posts: 9

Time spent in forums: 2 h 52 m 56 sec
Reputation 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.

December 22nd, 2012, 06:21 AM

redstep

Registered User

Join Date: Dec 2012

Posts: 9

Time spent in forums: 2 h 52 m 56 sec
Reputation 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.

December 22nd, 2012, 09:17 AM

EEsterling

Contributing User

Join Date: Feb 2011

Posts: 97

Time spent in forums: 1 Day 18 h 28 m 56 sec
Reputation Power: 49

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?

#10

December 22nd, 2012, 09:26 AM

redstep

Registered User

Join Date: Dec 2012

Posts: 9

Time spent in forums: 2 h 52 m 56 sec
Reputation 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.

#11

December 22nd, 2012, 10:34 AM

redstep

Registered User

Join Date: Dec 2012

Posts: 9

Time spent in forums: 2 h 52 m 56 sec
Reputation 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!

Different link styles in a single template

Developer Shed Advertisers and Affiliates