Topic: switch to bold and increase font size of "Read More | Write Comment"

[fapencio]

i want switch to bold and increase font size of "Read More | Write Comment" of "BoardNews",



please help 

[AngelinaBelle]

This you can find in PortalBlocks.php

I recommend that you apply a custom class to these words.  And then, use some custom CSS in your portal.css for that class.

[fapencio]

i dont have knowledge about css, php, html, im a newbie in this works, a total newbie

[AngelinaBelle]

Since you are very eager to customize your website, you will really enjoy beginning to learn a little HTML and CSS.  So let's keep this very simple.  Let's use only CSS to restyle this part of your page.

1. Figure out how to tell the browser how to find the thing you want to style.  For this, I like to use the "F12" developers tool for my browser.  For Chrome and IE, you can get this by using the F12 key on your keyboard.

So go to your portal page and use the F12 key.  Then use the "point to element" feature of your F12 tools to point to the part of the page you are interested in.  Then look at what tags are used for it, what styles are used.   I used Chrome's point tool () to point to "Read More", and then looked at what the HTML said.



I see

Code: [Select]

<div class="windowbg sp_article_content">
... stuff ...
                  <div class="sp_content_padding">
... more stuff ...                 
                           <div class="sp_right"><a href="http://simpleportal.net/index.php?topic=11488.0">Read More</a> | <a href="http://simpleportal.net/index.php?action=post;topic=11488.17">Write Comment</a><>
                  <>
... still more stuff...
               <>This tells me that I can change the styling of "read more" and "Write comment" by adding a rule to the bottom of my CSS file that says "look for a tag with class sp_right inside a block with a tag with class sp_content_padding inside a block with a tag with class sp_article_content"

2. Figure out which rule to apply.  You want bigger? Perhaps a rule to double the font size?  font-size: 200% ought to do the trick

3. Put that rule in a CSS file.  I suggest at the very bottom of portal.css.  Remember that the next time you update Simpleportal, you will have to do this all over again, so save your changes somewhere safe so you can use them again.

Code: [Select]

.sp_article_content .sp_content_padding .sp_right {
     font-size: 200%;
}
For more information about CSS, check out some helpful tutorial site like w3schools.com