Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Decrease displayed text size?

Featured Lock Resolved Task
Hi guys,

I'm currently using 'Nivo Slider' option. Could you tell me how to decrease the 'Title text' size?

The module is running on my website homepage - it is the 'Windows 8.1 Tips' and 'Internet Safety' text I want to reduce in size.

Kind regards

Roger

7 Answers

Guy Walder

More than a month ago #Permalink
Hi,

I got to it by inspecting the element. Use FF or Chrome, right click on an element on the screen and select inspect element. See attached image.
Try this:
h1.nivo-title {
font-size:20px;
}


You can change the number to what ever you like.
Please note that I've instructed you to add the code to custom.css file. It's under the CSS folder in your template. It has nothing to do with less.

Attachments (1)

  • screencapture.jpg
    screencapture.jpg 316 KB

Guy Walder

More than a month ago #Permalink
Create a custom.css file under templates/yourtemplate/css and add the following code:
.nivo-capture h1.nivo-title {
font-size: choose a size and add px (for example 20px);
}


As for now it is set to 38.5px. That is to big.

Roger

More than a month ago #Permalink
Hi Guy,

Thanks for your reply. I have added:

.nivo-capture h1.nivo-title {
font-size: 18px;
}

to my custom.css file but unfortunately this seems to be making no difference to the title text size :-(

Could you also tell me were you browsed to find that it was 38.5? Can it be edited here directly? I do use less function but have turned off and inputted changes.

Roger

Roger

More than a month ago #Permalink
Guy,

Brilliant, thank you so much for all your help. If you don't mind as this sounds like child's play to you. Could you take a quick look back at the slider and suggest how I could:

1. Make the black background of the text we altered more transparent or
2. Reduce the night of the black area so it does not cover up so much of the slider images.

Rog

Guy Walder

More than a month ago #Permalink
In the same custom.css file, add this line
.nivo-caption {
opacity: 0.6;
}

You can change the 6 to any other number to control the opacity level.
When you reduce the font size the height will be reduced automatically.
Cheers :)

Roger

More than a month ago #Permalink
Guy, you're a good bloke. Thanks for you help. Spot on :-)


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 119
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 89
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 4
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296174

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us