The Joomla! Forum ™

Download

Demo


Board index » Joomla! Older Version Support » Joomla! 1.5 » Templates for Joomla! 1.5 » Default template: Milky Way in Joomla! 1.5

Forum rules


Please click here to view the forum rules



Post new topic Reply to topic  Page 1 of 1
  [ 20 posts ] 
  Print view Previous topic | Next topic 
Author Message
wtfbrb
 Post subject: Modify Module CSS
PostPosted: Wed Sep 03, 2008 8:26 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Oct 15, 2007 3:47 am
Posts: 20
I am trying to modify the componentheading for a couple of my modules. But I want to keep the rest the same. So I added the suffix -action to the modules then added these lines to the css:

h3-action, .componentheading-action, table.moduletable-action th {
color: #F73021;
}

I have tried every different combination of -action with those lines...I think I must be close because if I remove -action it changes all the headings...what am I missing?
Top
 Profile  
 
normdouglas
 Post subject: Re: Modify Module CSS
PostPosted: Wed Sep 03, 2008 10:24 pm 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Fri Jan 20, 2006 11:37 am
Posts: 2605
Location: Forrest Australia
You are on the right track, however when you apply a suffix, you need to add the -suffixname to a number of different areas of your css.

What you need to do, is to copy the h3, .componentheading, table.moduletable
sections of your css, separate them, and add the -suffix to them... then style them all differently to meet your needs.

Hope this helps.

_________________
Step1. Read the instructions. Step2. Refer to step 1. Step 3. Backup
Can't find the answers you need?
Joomla Video Tutorials ~> http://www.teachingjoomla.com
Top
 Profile  
 
wtfbrb
 Post subject: Re: Modify Module CSS
PostPosted: Thu Sep 04, 2008 1:16 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Oct 15, 2007 3:47 am
Posts: 20
I believe that is what I've done...still nothing. Here is my current css:

h3, .componentheading, table.moduletable th {
color: #135cae;
}
.componentheading-action {
color: #F73021;
}
h3-action {
color: #F73021;
}
table.moduletable-action {
color: #F73021;
}
table.moduletable-action th {
color: #F73021;
}

This is in the blue.css file...all I want to change is the color for modules with the suffix -action.
Top
 Profile  
 
normdouglas
 Post subject: Re: Modify Module CSS
PostPosted: Thu Sep 04, 2008 9:54 am 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Fri Jan 20, 2006 11:37 am
Posts: 2605
Location: Forrest Australia
When you say change the color, do you mean the font color?

Also, it might be in a DIV... if you provide your URL, I might be able to help further.

_________________
Step1. Read the instructions. Step2. Refer to step 1. Step 3. Backup
Can't find the answers you need?
Joomla Video Tutorials ~> http://www.teachingjoomla.com
Top
 Profile  
 
wtfbrb
 Post subject: Re: Modify Module CSS
PostPosted: Thu Sep 04, 2008 6:13 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Oct 15, 2007 3:47 am
Posts: 20
I do mean font color, the site is at www.awaj.mvmdata.com
Top
 Profile  
 
normdouglas
 Post subject: Re: Modify Module CSS
PostPosted: Thu Sep 04, 2008 9:54 pm 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Fri Jan 20, 2006 11:37 am
Posts: 2605
Location: Forrest Australia
Add this to your blue.css

.moduletable-action h3 {
color:YOURCOLORHERE;
}

Note no comma, between action and h3

Hope this helps

_________________
Step1. Read the instructions. Step2. Refer to step 1. Step 3. Backup
Can't find the answers you need?
Joomla Video Tutorials ~> http://www.teachingjoomla.com
Top
 Profile  
 
BNCAD
 Post subject: Re: Modify Module CSS
PostPosted: Wed Mar 04, 2009 8:39 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Mar 04, 2009 4:14 pm
Posts: 7
Can you also help with this please my url is www.blackpool-night-clubs-and-djs.co.uk I cant change the padding in the user stats module and the whos online module in the right column.
Top
 Profile  
 
normdouglas
 Post subject: Re: Modify Module CSS
PostPosted: Wed Mar 04, 2009 9:37 pm 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Fri Jan 20, 2006 11:37 am
Posts: 2605
Location: Forrest Australia
You would need to style these in the actual module... rather than the template. Problem is the "who's online" hasn't used a <p> tag for it's content.

You could also add a suffix to that module and style it individually.

_________________
Step1. Read the instructions. Step2. Refer to step 1. Step 3. Backup
Can't find the answers you need?
Joomla Video Tutorials ~> http://www.teachingjoomla.com
Top
 Profile  
 
BNCAD
 Post subject: Re: Modify Module CSS
PostPosted: Fri Mar 06, 2009 10:08 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Mar 04, 2009 4:14 pm
Posts: 7
That is baffling me when i add a suffix class it the css jjst dissapears, obvious I have to then add it but I know if you leave a space then the suffix it keeps the css and then you just add .suffixname to style sheets but cant get it working any help with this ?

EG I want it to look like every other module what code would i need to add to the style sheet ?
Top
 Profile  
 
normdouglas
 Post subject: Re: Modify Module CSS
PostPosted: Mon Mar 09, 2009 8:58 am 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Fri Jan 20, 2006 11:37 am
Posts: 2605
Location: Forrest Australia
the suffix would need to be somthing like space name.

Then just do something like...

.suffixname p {
styling
}

Somethinglike that... you are on the right track anyway... it's fun isn't it?

Also maybe this will help
viewtopic.php?f=469&t=357340

_________________
Step1. Read the instructions. Step2. Refer to step 1. Step 3. Backup
Can't find the answers you need?
Joomla Video Tutorials ~> http://www.teachingjoomla.com
Top
 Profile  
 
BNCAD
 Post subject: Re: Modify Module CSS
PostPosted: Wed Mar 18, 2009 8:20 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Mar 04, 2009 4:14 pm
Posts: 7
Hi thanks for yourhelp I have figured out how to do it but nbot the online members bit.

here is what i foundout

1. Go to the module you want to edit
2. Add your module suffix ie mycss

( This is how I figured it out )
3. View the page source and go to the area of the module you have just changed the suffix for
4. You will notice that it does not say the suffix you put in but has module in front of it ie <div class="modulemycss"
5. Go to your main css sheet
6. Add .modulemycss { your css here }
7. Then add .modulemycss h3 ( or h1 or h2 whichever is used for the title of that module, again you can see this in the view source)
8. Then add your css for that header ie .modulemycss h3 { your css here }

Although this is quite straight forward css it took me ages to figure out how to do it.

hope this helps anyone who gets tsuck like I did !!

Can anyone help with how to add the css to the whos online text as it is not in <p> tag :laugh:]

Thanks to normdouglas for your help.
Top
 Profile  
 
kelvster10
 Post subject: Re: Modify Module CSS
PostPosted: Wed Mar 25, 2009 12:39 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Mar 25, 2009 12:26 am
Posts: 2
I have a problem with my modules, in that despite entering a Module Class Suffix when I view the page source, there is no div, no table, no anything surrounding the module, so at the moment I'm having to add div tags to the index.php to get my css to affect the modules.

i.e.
Code:
<div id="random"><jdoc:include type="modules" name="left" /></div>


This wont do. As for possible causes, i'm not sure, i am using a blank template which I have been customizing and I wonder if anything needs to be added to allow the class suffixes to be recognised.

Anyone have any ideas?
Top
 Profile  
 
normdouglas
 Post subject: Re: Modify Module CSS
PostPosted: Wed Mar 25, 2009 2:42 am 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Fri Jan 20, 2006 11:37 am
Posts: 2605
Location: Forrest Australia
That is the way I would do it anyway...

You could also do <jdoc:include type="modules" name="left" style="xhtml" />

P.s dont hijack threads, start new ones

_________________
Step1. Read the instructions. Step2. Refer to step 1. Step 3. Backup
Can't find the answers you need?
Joomla Video Tutorials ~> http://www.teachingjoomla.com
Top
 Profile  
 
kelvster10
 Post subject: Re: Modify Module CSS
PostPosted: Wed Mar 25, 2009 4:42 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Mar 25, 2009 12:26 am
Posts: 2
Thanks Norm, and apologies for hijacking. I figured it was along the same lines but you're right i should have started a new thread.
Top
 Profile  
 
I_Joomla
 Post subject: Re: Modify Module CSS
PostPosted: Tue Aug 04, 2009 5:01 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Apr 14, 2009 5:50 pm
Posts: 13
Hey guys do any of you have a link to a youtube video or a really good on line tutorial for Module CSS?
Top
 Profile  
 
normdouglas
 Post subject: Re: Modify Module CSS
PostPosted: Wed Aug 05, 2009 3:10 am 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Fri Jan 20, 2006 11:37 am
Posts: 2605
Location: Forrest Australia
You can check out some of my videos... look at my signature

_________________
Step1. Read the instructions. Step2. Refer to step 1. Step 3. Backup
Can't find the answers you need?
Joomla Video Tutorials ~> http://www.teachingjoomla.com
Top
 Profile  
 
bellmac
 Post subject: Re: Modify Module CSS
PostPosted: Mon Jul 12, 2010 1:39 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Tue Jan 19, 2010 6:28 pm
Posts: 136
I am trying to add a background to the module (notices and announcements on a site I am working on. Tried doing so on the customizable css of the module but it applies it to each individual notice instead of the module as a whole. Tried adding a suffix (which I don't know a huge amount about) and adding the background in a new style with the same name as the suffix but it simply didn't work. Do you know what I should put in the customizable css for the module to fix this??

http://taymouth.ca is the site address.

_________________
- Bellmac Business Development Services
http://www.bellmac.com
Top
 Profile  
 
laura3gsd
 Post subject: Re: Modify Module CSS
PostPosted: Sat Sep 17, 2011 2:36 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Aug 07, 2011 5:25 am
Posts: 16
BNCAD wrote:
here is what i foundout

1. Go to the module you want to edit
2. Add your module suffix ie mycss

( This is how I figured it out )
3. View the page source and go to the area of the module you have just changed the suffix for
4. You will notice that it does not say the suffix you put in but has module in front of it ie <div class="modulemycss"
5. Go to your main css sheet
6. Add .modulemycss { your css here }
7. Then add .modulemycss h3 ( or h1 or h2 whichever is used for the title of that module, again you can see this in the view source)
8. Then add your css for that header ie .modulemycss h3 { your css here }


Thank you to everyone posting in this thread - it helped to read through for clues at least! I didn't know about the suffix or its use in the modules. Normdouglas thanks for the tips on suffix.

BNCAD
Thank you SO MUCH. I have been searching for DAYS to find out how to position the newsflash module. This simple instruction helped tremendously.

Laura
Top
 Profile  
 
haniar
 Post subject: Re: Modify Module CSS
PostPosted: Fri Dec 02, 2011 3:44 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Dec 02, 2011 3:18 am
Posts: 3
I'm looking to adapt the Search module for my theme. Currently it displays the word "Search" above the search field, which I'd like to remove entirely. I'd also like to change the size of the search field and eliminate the box borders.

I understand css, but I'm having difficulty overriding the module css, and I can't locate the exact terms in the module files (e.g., search.css).

I've tried installing the Custom Search module, and that helps some (I can use an image for the search button).

Any suggestions?

Thanks,
Hani
Top
 Profile  
 
gjlook
 Post subject: Re: Modify Module CSS
PostPosted: Tue Sep 04, 2012 12:07 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Jan 09, 2012 11:33 pm
Posts: 32
****** ive just realised what hijacking a post means so apologies - i will pst thie as a new topic ********

hi there

i have created a new module in index.php and defined its style and position in template.css and thats fine

ive assigned it to a position in templatedetails.xml and thats fine

ive then assigned module latestnews to that position and thats fine !

However i want to show the title 'Latest news' which ive enabled in the latestnews module but it wont show in my new module

any ideas ? sounds like my new module is missing a parameter somewhere

many thanks
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 20 posts ] 


Board index » Joomla! Older Version Support » Joomla! 1.5 » Templates for Joomla! 1.5 » Default template: Milky Way in Joomla! 1.5

Who is online

Users browsing this forum: No registered users and 3 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