Editing CSS for colors of links - textarea versus nav and usernames

Started by legaziofunk, July 20, 2018, 06:10:13 AM

Previous topic - Next topic

legaziofunk

Hello people,

I am using the CORE THEME.

I am not really oriented when it comes to editing CSS of themes.

I do understand teh basic idea of CSS and that it provides editing of basically all elements of a site.

My goal is, to have the link colors in the text area ONLY edited and understand that the index.css is what I need to alter.

By "text area" I meant THIS here, where you can read this.

I found the following entry right at the beginning of the index.css:
Quote
/* Normal, standard links. */
a:link, a:visited
{
   color: #6666cc;
   text-decoration: none;
}
a:hover
{
   text-decoration: underline;
}

But when editing the color, ALL links are being altered, which includes the navigation, the profile names, the titles of the threads and posts etc.

As you can see in this forum itself, there is a difference between colors of profile names on the one hand and colors of links within a post on the other.

The theme css does provide some some info about meanings of individual entries (what entry refers to what elemtn on the site). But not all of them are fully explained and I have no clue what element - sort of - overrides another. E.g. you can edit several color settings, but some are more specific while others are more general in meaning. Yet, I do not see a difference after editing them.

Well, I now, this question must be a pain in the butt for you experts, but is there some hint, where I can find something like a table of explanation which entry refers to which element?

Or does anyone have a general info about how to apporach this issue of mine?

Thanx a lot

Chris

P.S. Also sorry, if this post is in the wring board. I thought, I am adressing a rather general issue here, that's why I did not bother to post it in the CORE THEME thread...
*I am a NEWBIE* Stats as of Dec. 2019
SMF: 2.0.15
Language: GERMAN UTF-8 by default for every user
Theme: CoreTheme
PHP: 7.2
MySQL Version: 5.6.45-86.1-log

SychO

add this

.post a {
   color: yourcolor;
}
.post a:hover {
   color: yourcolor;
}


"post" refers to the element which has the class "post"
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Gwenwyfar

You may want to look at some basic guides of how css works, and many of these questions will make much more sense for you. You can also use the "inspect element" function in your browser to look at what is being applied where and to view your changes in real time.
"It is impossible to communicate with one that does not wish to communicate"

legaziofunk

Quote from: SychO on July 20, 2018, 06:41:05 AM
add this

.post a {
   color: yourcolor;
}
.post a:hover {
   color: yourcolor;
}


"post" refers to the element which has the class "post"

Thank you, but it did not work.

/* Normal, standard links. */
a:link, a:visited
{
   color: #663366;
   text-decoration: none;
}
a:hover
{
   text-decoration: underline;
}

.post a {
   color: 6666cc;
}
.post a:hover {
   color: 663366;
}


This is how I added it.

The color of a link WITHIN a post was supposed to be blue - and violet when hovering over.

All the other Links outside the post (e.g. Profile name etc.) should be violet.

But also the post color is now blue.

This freaks me out...
*I am a NEWBIE* Stats as of Dec. 2019
SMF: 2.0.15
Language: GERMAN UTF-8 by default for every user
Theme: CoreTheme
PHP: 7.2
MySQL Version: 5.6.45-86.1-log

AllanD

add a # in front of the 6666cc to make the color work.


.post a { 
           color: #6666cc;
}
.post a:hover  { 
           color: #663366;
}
Check out this great sites.
KnD Hosting

Advertisement: