The Joomla! Forum ™



Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic Reply to topic  [ 11 posts ] 
Author Message
PostPosted: Thu Jul 23, 2009 9:14 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Jul 23, 2009 8:39 pm
Posts: 3
Hi everyone,

as a newbie to Joomla, I have spent hours after hours on researching how to get "the little things" done. Like the following:

How on earth do I increase the font size of a category list? I assume I would use the template css for that, but I have no idea where and how?
I can change the font size in the global settings part of the css, but that's not what I want. I just want the category list to change its font size.

Would any friendly soul around here be so kind and explain to me how I should go about this?

Many Thanks, much appreciated,
Frank


Top
 Profile  
 
PostPosted: Thu Jul 23, 2009 9:35 pm 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Thu Jul 24, 2008 12:48 pm
Posts: 2678
Location: Austin, TX
I looked at the HTML used in the Category List view and didn't see any classes or anything used specifically for the Category List, so it might be difficult to change the styles and only have it change this one page.

You can copy the following files to your template directory and override them if you want:
.../components/com_content/views/category/tmpl/default.php
.../components/com_content/views/category/tmpl/default_items.php

Then you can add your own classes and style them however you like.


If you haven't done any template overrides, this is a good page to read:
http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core


Let me know how it goes. If anyone has a way to do this with just styles, let us know. I would also be interested in a way to do it without using overrides.

_________________
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.


Top
 Profile  
 
PostPosted: Thu Jul 23, 2009 9:37 pm 
User avatar
Joomla! Master
Joomla! Master

Joined: Wed Aug 13, 2008 2:57 am
Posts: 20420
Location: Chennai, India
The best way to these things is to use the firebug in FireFox. When you inspect items in Firbug it will provide you all the details such as the div ids, class names, the css used and in which the css is coming from and so fort.

Also, review the created source file.

_________________
- Ilagnayeru (MIG) Manickam
http://www.eegan.org - helping the poor and underprivileged
educate. empower. enrich.
Support the poor and underprivileged


Top
 Profile  
 
PostPosted: Fri Jul 24, 2009 8:08 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Jul 23, 2009 8:39 pm
Posts: 3
thank you for your replies - I was afraid there is no easier method, what a shame.

Actually both of your replies helped me, although the endless "inherited from..." hierarchy that firebug reports for the site is making my brain flinch :-)

I have managed to increase the font size for the numbering in the category list, but not for the items in the category list. That seems to be overridden somewhere else. Damn, what a waste of time, isn't it?

It's so surprising for a new Joomla user, that some of the real complicated stuff is so easy to add, and the seemingly simple thing require coding skills.
Like, you upload the virtuemart and boom - it just works. Then you try to tweak a font somehwere, and keep looking for hours for a solution.

But anyway, I shouldn't be ranting, in the end it's a great piece of software. So thanks, I keep chasing the class hierarchies and will eventually find the culprit.

Frank


Top
 Profile  
 
PostPosted: Fri Jul 24, 2009 11:32 pm 
Joomla! Hero
Joomla! Hero

Joined: Sun Jun 25, 2006 12:12 am
Posts: 2853
Location: Salisbury, NC/USA (N. of Charlotte)
Look in the components/category for the category blog list layout and see if there is some hard code styling the text in the .php file.

_________________
http://www.200mphMedia.net
Author: Joomla 1.6 Picture Yourself Series book @ Amazon.com
Book also covers Version 1.7, 2.5, which had no notable/major user-side changes.


Top
 Profile  
 
PostPosted: Sat Jul 25, 2009 8:06 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Jul 23, 2009 8:39 pm
Posts: 3
I found a solution, but I must admit that I do not understand it in full.

I was searching for another template that would have a more detailed css than the one I was trying to tweak. I found tw_webapplication, and in the section of the css labelled com_content, there was a line starting with table contentpane. I have added a font-size:18px there, and it changed the font size of the category list. Hooray.

I then copied that part to my old template, but the font size remained small.
This is the part where I don't understand why. I then copied all of the new css (except the part where the header and logo styling occurs) into my old old css, overwriting all the original stuff.

That was the solution for me.
If anyone is interested, my desired template was tw_jungle, and the one with the more dtailed css was tw_webapplication. Maybe someone else with more css know how can figure out what exactly needs to be done in order to modify the css.

Frank


Top
 Profile  
 
PostPosted: Thu Sep 03, 2009 9:55 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Sep 03, 2009 9:48 pm
Posts: 9
Thanks for the suggestion of using Firebug - it helped me narrow down the exact line in my template.css file to change. I am using a template from Rocket Theme, and the particular class was called sectiontableentry. I added the code

font-size:150%

and also
line-height: 25px

because once the font was bigger it had to be further apart.

Hope this helps someone else to figure out where to find it. So far it doesn't appear to have affected anything but the category list layout. I haven't figured out the section list yet - it just shows it in an <ul>, so I need to figure that out.


Top
 Profile  
 
PostPosted: Thu Sep 03, 2009 10:19 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Sep 03, 2009 9:48 pm
Posts: 9
Just figured out the section list as well (that was showing up as an <ul>). Firebug told me it was calling the class "category" to list the categories on the page, but my template.css didn't have a class called "category". So I made one. Just added a bit at the end

.category {
font-size:150%;
line-height:25px;
}

And it worked like a charm. Hope this helps.


Top
 Profile  
 
PostPosted: Fri Sep 04, 2009 3:28 am 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Thu Jul 24, 2008 12:48 pm
Posts: 2678
Location: Austin, TX
Isn't Firebug awesome?

Glad to help. Thanks for posting your solution back for others.

_________________
Will Mavis - Joomla Developer
http://www.covertapps.com/jam <<< Joomla! on your Android, iPhone, iPad, and iPod Touch
If you think I can help you, PM me a link to your post and I will respond. Please don't hijack another user's thread.


Top
 Profile  
 
PostPosted: Mon Sep 14, 2009 11:34 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Apr 06, 2009 9:59 am
Posts: 18
Location: Sydney, Australia
Hi guys

Maybe I missed something, but I was trying to change the "look" (font size, colour, bg, etc) of all 'Category List Layout' pages and could do it so by changing the classes "sectiontableheader", "sectiontableentry1", etc in the main CSS file.

Of course if you want to change just one page you can create new exclusive CSS classes and add a "Page Class Suffix" under Parameters (System).

Hope this helps

_________________
'The sprig of acacia, at the head of the grave, refers to the immortality of the soul'
http://www.avocom.com.au


Top
 Profile  
 
PostPosted: Tue Aug 07, 2012 1:39 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Jan 09, 2012 11:33 pm
Posts: 28
After much messing around i boiled it down to this :

i wanted my category list to have a white background ....

so create a menu thats linked to a 'category list' as normal
then in the new menu's 'parameters (system)' section on the right , enter a page class suffix - remember to put a space first !! ive called mine {space bar}gjwhite_back

save and run ... nothing happens

then go into your relevant template.css file
go to the bottom of the document and then i added this section ( you obviously add your own version )

.contentpane.gjwhite_back {
background-color: #FFFFFF;
border: 2px solid black;
margin-bottom: 5px;
padding: 10px;
}

note the full stops before and after contentpane and yes there's is no space before my gjwhite_back here

save and run and that works for me . one of the things that messed me up for a while was i used a square bracket in a previous entry by mistake and that invalidated anything i entered underneath .

there are other ways of modifying these lists but i hope this helps


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 11 posts ] 



Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group