Title: Styling WordPress Elements
Last modified: August 19, 2016
---
# Styling WordPress Elements
* [millsy](https://wordpress.org/support/users/millsy/)
* (@millsy)
* [17 years, 5 months ago](https://wordpress.org/support/topic/styling-wordpress-elements/)
* Hello
* I want to style parts of my page such as:
* But wasnt sure/where how the styles should be assigned?
At the moment I have
a default style for all a:link’s on my page but I want these wordpress items
to be styled differently.
Viewing 4 replies - 1 through 4 (of 4 total)
* [rtivel](https://wordpress.org/support/users/rtivel/)
* (@rtivel)
* [17 years, 5 months ago](https://wordpress.org/support/topic/styling-wordpress-elements/#post-894794)
* Here are a couple of ideas from a relative WordPress newbie.
* Open up your blog page in a browser and then use the view source menu option.
You can then find the class name for the text you want to style. For example,
I opened up a browser for a test blog on my PC and found the following HTML in
the source code:
* `Read the rest
of this entry »`
* The code shows a couple of important things: it shows the styling class name
for the text, “Read the rest of this entry »”. The styling class name is “more-
link”.
* Here is how I styled the “Read the rest of this entry »” message:
* I Opened the style.css file for my theme with a basic text editor. The CSS file
was in the \wordpress\wp-content\themes\yourtheme directory. The class name of“.
more-link” did not exist in my style.css file–so I added it to the end of my
CSS file:
* ```
.more-link { /*don't forget the period in front of the class name*/
color:red; /*change the message color to red*/
}
```
* This changes the color of the message to red. If you wanted to stylize the link
behavior, you could add the Anchor Pseudo-classes to the style.css file, referencing
the .more-link class, like this:
* ```
a.more-link:link {color: #FF0000} /* unvisited link */
a.more-link:visited {color: #00FF00} /* visited link */
a.more-link:active {color: #0000FF} /* selected link */
a.more-link:hover {color: #FF00FF} /* mouse over link */
```
* As for the text, I opened the index.php file for my theme. I found this:
* ``
* I changed it to this:
* ``
* For other navigation links, the problem appears to be more difficult. What is
really needed is a class name added to the generated link. You might look at
[http://trac.wordpress.org/ticket/6109](http://trac.wordpress.org/ticket/6109)
for an idea of what might be involved. Perhaps someone a lot more familiar with
patches and PHP can add some advice here. This is a very interesting problem.
* [rtivel](https://wordpress.org/support/users/rtivel/)
* (@rtivel)
* [17 years, 5 months ago](https://wordpress.org/support/topic/styling-wordpress-elements/#post-894795)
* Here are a couple of ideas from a relative WordPress newbie.
* Open up your blog page in a browser and then use the view source menu option.
You can then find the class name for the text you want to style. For example,
I opened up a browser for a test blog on my PC and found the following HTML in
the source code:
* `Read the rest
of this entry »`
* The code shows a couple of important things: it shows the styling class name
for the text, “Read the rest of this entry »”. The styling class name is “more-
link”.
* Here is how I styled the “Read the rest of this entry »” message:
* I Opened the style.css file for my theme with a basic text editor. The CSS file
was in the \wordpress\wp-content\themes\yourtheme directory. The class name of“.
more-link” did not exist in my style.css file–so I added it to the end of my
CSS file:
* ```
.more-link { /*don't forget the period in front of the class name*/
color:red; /*change the message color to red*/
}
```
* This changes the color of the message to red. If you wanted to stylize the link
behavior, you could add the Anchor Pseudo-classes to the style.css file, referencing
the .more-link class, like this:
* ```
a.more-link:link {color: #FF0000} /* unvisited link */
a.more-link:visited {color: #00FF00} /* visited link */
a.more-link:active {color: #0000FF} /* selected link */
a.more-link:hover {color: #FF00FF} /* mouse over link */
```
* As for the text, I opened the index.php file for my theme. I found this:
* ``
* I changed it to this:
* ``
* For other navigation links, the problem appears to be more difficult. What is
really needed is a class name added to the generated link. You might look at
[http://trac.wordpress.org/ticket/6109](http://trac.wordpress.org/ticket/6109)
for an idea of what might be involved. Perhaps someone a lot more familiar with
patches and PHP can add some advice here. This is a very interesting problem.
* [rtivel](https://wordpress.org/support/users/rtivel/)
* (@rtivel)
* [17 years, 5 months ago](https://wordpress.org/support/topic/styling-wordpress-elements/#post-894796)
* Sorry for the double post. If a moderator sees this perhaps one of the posts
can be deleted. I did not think the first post went through. I just didn’t wait
long enough.
* [rtivel](https://wordpress.org/support/users/rtivel/)
* (@rtivel)
* [17 years, 5 months ago](https://wordpress.org/support/topic/styling-wordpress-elements/#post-894804)
* With respect to the “Older Entries” and “Newer Entries” styling, I manually patched
the wp-includes/link-template.php file as shown in [http://trac.wordpress.org/ticket/6109](http://trac.wordpress.org/ticket/6109).
* I specified class names as shown below:
* line 688 `function next_posts_link($label=’Next Page »’, $max_page=0, $class=’
nextpostlink’) {
line 722 function previous_posts_link($label=’« Previous Page’,
$class=’previouspostlink’) {`
* After saving the changes, the source code for my theme included the following:
* ```
```
* Once the class names had been defined, I could add the classes to my CSS file:
* ```
.nextpostlink {
color:green;
}
.previouspostlink {
color:maroon;
}
I could also modify the link behaviour by including these lines in the CSS file:
a.nextpostlink:link {color: red} /* unvisited link */
a.nextpostlink:visited {color: blue} /* visited link */
a.nextpostlink:hover {color: green} /* mouse over link */
a.nextpostlink:active {color: maroon} /* selected link */
a.previouspostlink:link {color: red} /* unvisited link */
a.previouspostlink:visited {color: blue} /* visited link */
a.previouspostlink:hover {color: green} /* mouse over link */
a.previouspostlink:active {color: maroon} /* selected link */
```
* What this shows is that even if some things in a WordPress theme can’t be styled“
out of the box,” the appropriate template files can be modified so as to produce
the styling you want (not that I could do this without the experts at WordPress).
Viewing 4 replies - 1 through 4 (of 4 total)
The topic ‘Styling WordPress Elements’ is closed to new replies.
## Tags
* [css](https://wordpress.org/support/topic-tag/css/)
* 4 replies
* 2 participants
* Last reply from: [rtivel](https://wordpress.org/support/users/rtivel/)
* Last activity: [17 years, 5 months ago](https://wordpress.org/support/topic/styling-wordpress-elements/#post-894804)
* Status: not resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics