By Monica Mollica on Monday, 30 December 2013
Posted in Technical Issues
Replies 7
Likes 0
Views 546
Votes 0
I would like to increase the font-size in the blog text, and made the search field wider and move it up so that it is on the same line as the icons.

http://www.agelessforever.net/index.php/anti-aging-news-articles

What css should I use to accomplish that?
Hello Monica,

Sorry for late reply to this,
I have tried to access in your provided that URL, but i getting this 404 error http://screencast.com/t/zdl2g7uBMZM
Also, Is it possible for you to provide us with the Joomla backend, screenshot (Which styling you would like to increase font size and move the search field) and FTP access to your site to check on this issue? Please advise.
·
Monday, 30 December 2013 10:39
·
0 Likes
·
0 Votes
·
0 Comments
·
Please try this http://www.agelessforever.net/anti-aging-news-articles/latest

I want to make the title font size (for ex Testosterone Replacement Therapy - why is it so controversial?) larger, and and the "read more" I want to remove the underline upon hover.

Also, I want to make the search field wider and move it up so that it is on the same line as the icons.

if you could give me CSS for this i'd be very grateful. Thanks for your help.
·
Thursday, 16 January 2014 04:38
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Monica,

Sorry for late reply to this,
I have tried to inspect in your site, you can applied the CSS code below into your template css file from JoomlaFolder/templates/rox_doom/css/template.css
First you have to remove this line code

.blog-meta-bottom .blog-more {
font-size: 20px;
color: #6f2b6c !important;
text-decoration: underline; //REMOVE THIS LINE CODE
}

After that add this few code at your bottom

.blog-meta-bottom .blog-more a
{
text-decoration: underline
}

.blog-meta-bottom .blog-more a:hover
{
text-decoration: none;
}

#ezblog-menu .blog-navi li.toolbar-item > form {
margin: 0 !important;
}

#ezblog-body .blog-post .blog-title, #ezblog-body .blog-post .blog-title a {
font-size: 30px !important;
}

#ezblog-menu .blog-navi li.toolbar-item > form input.input {
width: 300px !important;
}

Then clear your everything cache and reload your file again and see how it goes.
·
Thursday, 16 January 2014 12:12
·
0 Likes
·
0 Votes
·
0 Comments
·
That helped, thank you.

Now, how do I make the "continue reading" link underlined, and remove underline on hover?

Also, under the blog post title, I want to underline the category link (and remove underline on hover).

Thanks for your great support!
·
Friday, 17 January 2014 04:45
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Monica,

I am really sorry for the delay of this reply as it is a Thaipusam public holiday for us here.
You're welcome I'm sorry that is my mistake, first you go to your template css file JoomlaFolder/templates/rox_doom/css/template.css
REMOVE THIS

.blog-meta-bottom .blog-more a
{
text-decoration: underline
}

.blog-meta-bottom .blog-more a:hover
{
text-decoration: none;
}


REPLACE THIS

.blog-meta-bottom .blog-more a
{
text-decoration: underline !important;
}

.blog-meta-bottom .blog-more a:hover
{
text-decoration: none !important;
}

.blog-meta .blog-category a
{
text-decoration: underline !important;
}

.blog-meta .blog-category a:hover
{
text-decoration: none !important;
}

Hope this help.
·
Friday, 17 January 2014 10:20
·
0 Likes
·
0 Votes
·
0 Comments
·
Now it all works. Thank you very much.

What does "!important;" do to the code?
·
Friday, 17 January 2014 11:29
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Monica Mollica,

You're welcome,
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:

p { color: #ff0000 !important; } // <-- red color
p { color: #000000; } // <-- black color

Hope this explanation help.
·
Friday, 17 January 2014 11:44
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post