Posted 3 years ago #
Hello
I want to style parts of my page such as:
<?php next_posts_link('« Older Entries') ?>
<?php the_content('Read the rest of this entry »'); ?>
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.
Posted 3 years ago #
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:
<a href="http://buddy/wordpress/?p=40#more-40" class="more-link">Read the rest of this entry »</a>
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:
<?php the_content('Read the rest of this entry »'); ?>
I changed it to this:
<?php the_content('More »'); ?>
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 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.
Posted 3 years ago #
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:
<a href="http://buddy/wordpress/?p=40#more-40" class="more-link">Read the rest of this entry »</a>
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:
<?php the_content('Read the rest of this entry »'); ?>
I changed it to this:
<?php the_content('More »'); ?>
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 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.
Posted 3 years ago #
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.
Posted 3 years ago #
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.
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:
<div class="navigation">
<div class="alignleft"><a href="http://buddy/wordpress/?paged=3" class="nextpostlink">« Older Entries</a></div>
<div class="alignright"><a href="http://buddy/wordpress/" class="previouspostlink">Newer Entries »</a></div>
</div>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).
This topic has been closed to new replies.
