NOTICE: RocketTheme will be releasing templates for Joomla! 1.5 only starting January 2009. Read the thread…
Search:     Advanced search
243445 Posts in 46063 Topics - Latest Member: vedranh
RocketTheme  |  General  |  Free/GPL/Tutorials Discussions  |  Topic: Roklatest customisation question for Rokwebify « previous next »
Pages: [1] Go Down Print
Author Topic: Roklatest customisation question for Rokwebify  (Read 2071 times)
DeeGee
Jr. Rocketeer
**
Offline Offline

Posts: 26
Roklatest customisation question for Rokwebify
« on: November 20, 2007, 09:17:21 AM »
Hi!

At www.deegee.net I use a slighty adapted version of RokWebify.
Also, I have the module Roklatest installed and working properly.
However, I would like to customise it a little.
As you can see, on the site there is no difference in appearance between the heading of the module and the clickable content-titles.
What do I have to do to make these two look different, so visitors immediately understand one is just the heading of the module, the other is a (clickable) title.

And, I would also like to add a little graphic before each title.
A graphic that shows the accordian is opened or closed.
Again, to inform visitors the title is clickable.

The homepage of www.rockettheme.com is a good example:
The heading differs from the titles of the content.
Small graphics are used to point out you can open/close a bit of content.
I have attached a screen of what I mean.

If someone can point me into the right (or exact) direction, I would appreciate it!
Logged
James S!
Muffin Man
RocketTheme
Hero Rocketteer
*
Offline Offline

Posts: 40145


Firebug...Firebug...Firebug!

WWW
Re: Roklatest customisation question for Rokwebify
« Reply #1 on: November 20, 2007, 11:05:11 AM »
Have you checked out the tutorials for other templates, such as http://www.rockettheme.com/option,com_smf/Itemid,190/topic,14464.0/ ?
Logged
Firebug Video Tuts: - Editing HTML - Javascript Errors - Logo Changes

Video tutorials on how to use Firebug, its what we use Smiley
DeeGee
Jr. Rocketeer
**
Offline Offline

Posts: 26
Re: Roklatest customisation question for Rokwebify
« Reply #2 on: November 21, 2007, 12:30:50 AM »
Oops, sorry James! And Thank you James!
I did a search on Roklatest and Rokwebify. I didn't know the customisations applied to any template.  Undecided

This (I still need to tweak the CSS though) partially answers my question.
What I still need to figure out is how to get the images before (left of) the headings(titles of content) in RokLatest.
Right now I managed to get the images showing, but they are behind the text (titles of content).
So how do I tackle this then?
Logged
James S!
Muffin Man
RocketTheme
Hero Rocketteer
*
Offline Offline

Posts: 40145


Firebug...Firebug...Firebug!

WWW
Re: Roklatest customisation question for Rokwebify
« Reply #3 on: November 21, 2007, 01:33:11 AM »
I assume you are adding the background to the 'h3' part of the code, add some padding for the same CSS block.
Logged
Firebug Video Tuts: - Editing HTML - Javascript Errors - Logo Changes

Video tutorials on how to use Firebug, its what we use Smiley
DeeGee
Jr. Rocketeer
**
Offline Offline

Posts: 26
Re: Roklatest customisation question for Rokwebify
« Reply #4 on: November 21, 2007, 04:52:48 AM »
Hi James,

thanks for your (EVER) quick reply. Amazing  Smiley
I am not very familiar with CSS though (although this club proves to be good learning ground!).
Indeed, I added the images as background (as you suggested in another thread).
I haven't added this code with the css code you suggested in the tutorial you suggested above.

So, do I understand your post above correctly by saying I need to add padding to the whole CSS block (concerning Roklatest)?
Looking at the CSS file, I see a lot of different settings, where do I have to add the padding?

This is what I have for now:

Code:
#accordian h3 {
background: url(../images/closed.gif) 1% 0 no-repeat;
}

#accordian h3.toggle {
background: url(../images/open.gif) 0 0 no-repeat;
}


/* roklatest stuff */


#accordian {
   margin-left: -15px;
   margin-top: -15px;
    width:205px;
   
}

#accordian h3.toggler {
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   height: 25px;
   line-height: 25px;
   font-weight: bold;
   padding: 0 5px;
   margin: 0;
   
}

#accordian div.element {
   padding: 10px 5px;
}

/* End RokLatest stuff */

/* RokLatest stuff */

#accordian h3.toggler {
   font-weight: bold;
   color: #333;
}

.bg0,
div.module-hilite4 li.bg0,
#accordian h3.toggler.bg0 {
   background: #F2F1D3;
}

.bg1,
div.module-hilite4 li.bg1,
#accordian h3.toggler.bg1 {
   background: #E5E3BC;
}

#accordian h3.toggler.bg0 {
   border-bottom: 1px solid #DFDED1;
}

#accordian h3.toggler.bg1 {
   border-bottom: 1px solid #ddd7cd;
}

/* End Rok Latest Stuff */


James, I haven't published it like this, yet. This is because it is a live site  Shocked . If you want a screenshot, let me know and I'll provide you with one.
Logged
James S!
Muffin Man
RocketTheme
Hero Rocketteer
*
Offline Offline

Posts: 40145


Firebug...Firebug...Firebug!

WWW
Re: Roklatest customisation question for Rokwebify
« Reply #5 on: November 21, 2007, 05:29:25 AM »
Should just be able to increase the padding for this reference

Quote
#accordian h3.toggler {
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   height: 25px;
   line-height: 25px;
   font-weight: bold;
   padding: 0 5px;
   margin: 0;
   
}
Logged
Firebug Video Tuts: - Editing HTML - Javascript Errors - Logo Changes

Video tutorials on how to use Firebug, its what we use Smiley
DeeGee
Jr. Rocketeer
**
Offline Offline

Posts: 26
Re: Roklatest customisation question for Rokwebify
« Reply #6 on: November 22, 2007, 04:52:58 AM »
Splendid James, thank you!  Smiley

I'm able to tweak it the way I like it, although I have two more questions:
1. I have both open and closed pictures for the backgrounds, and declared in my css file.
However they do not switch like the ones on the frontpage of www.rockettheme.com (I sticks to the closed image).
How do I fix this?

2. I want to lower the graphics a bit (they hover) so they are in line with the titles.
see www.deegee.net to see what I mean.
What parameter to change/add?

And this is what I have now in the css file (accordian)
Code:
#accordian h3 {
background:transparent url(../images/closed.gif) no-repeat scroll 1% 0pt;
}
#accordian h3.toggle {
background:transparent url(../images/open.gif) no-repeat scroll 0pt;
}
#accordian h3.toggler {
color:#99CC00;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0pt;
padding:0pt 25px;
position:relative;
}

I have said it before, but say it again: this club REALLY stands out in willingness to help everyone out. I have learned so much because of this in such a short time. Many, many thanks again to everyone (and James in particular  Wink)
« Last Edit: November 22, 2007, 08:34:37 AM by DeeGee » Logged
James S!
Muffin Man
RocketTheme
Hero Rocketteer
*
Offline Offline

Posts: 40145


Firebug...Firebug...Firebug!

WWW
Re: Roklatest customisation question for Rokwebify
« Reply #7 on: November 22, 2007, 10:16:01 AM »
Use the following

Quote
#accordian h3 {
background: url(../images/closed.gif) no-repeat scroll 1% 3pt;
}
#accordian h3.toggle-hilite {
background: url(../images/open.gif) no-repeat scroll 1% 3pt;
}
Logged
Firebug Video Tuts: - Editing HTML - Javascript Errors - Logo Changes

Video tutorials on how to use Firebug, its what we use Smiley
DeeGee
Jr. Rocketeer
**
Offline Offline

Posts: 26
Re: Roklatest customisation question for Rokwebify
« Reply #8 on: November 24, 2007, 02:23:08 AM »
Dear James,

Superb! That nailed it right on the spot! (I would have never figured this out in 100 years....)

Smiley   THANK YOU JAMES!    Smiley
One more problem to tackle:
it doesnīt seem to change the image whether an accordian item is open or closed. It displays closed.gif in both events.
Do you know how to fix this? Maybe it is because I have messed up the CSS (multiple entries?)?

Here is all the relevant (active) CSS code related to RokLatest, just in case...  Wink

Code:
#accordian h3 {
   background: url(../images/closed.gif) no-repeat scroll 1% 3pt;
}

#accordian h3.toggle {
background: url(../images/open.gif) no-repeat scroll 1% 3pt;
}

#accordian h3.toggler {
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   height: 25px;
   line-height: 25px;
   font-weight: bold;
   padding: 0 22px;
   margin: 0;
   color: #99CC00;

}
« Last Edit: November 24, 2007, 02:36:33 AM by DeeGee » Logged
James S!
Muffin Man
RocketTheme
Hero Rocketteer
*
Offline Offline

Posts: 40145


Firebug...Firebug...Firebug!

WWW
Re: Roklatest customisation question for Rokwebify
« Reply #9 on: November 24, 2007, 03:18:08 AM »
You didn't copy my CSS correctly Smiley

Quote
#accordian h3.toggle-hilite {
background: url(../images/open.gif) no-repeat scroll 1% 3pt;
}
Logged
Firebug Video Tuts: - Editing HTML - Javascript Errors - Logo Changes

Video tutorials on how to use Firebug, its what we use Smiley
DeeGee
Jr. Rocketeer
**
Offline Offline

Posts: 26
Re: Roklatest customisation question for Rokwebify
« Reply #10 on: November 24, 2007, 03:54:14 AM »
Oh dear, I canīt even COPY code correctly  Shocked
What does THAT make me??  Cry

Thanks James, that completely solved it. Wonderful, thank you very much  Cheesy
Logged
James S!
Muffin Man
RocketTheme
Hero Rocketteer
*
Offline Offline

Posts: 40145


Firebug...Firebug...Firebug!

WWW
Re: Roklatest customisation question for Rokwebify
« Reply #11 on: November 24, 2007, 04:27:38 AM »
Hehe  Grin Happy to help.
Logged
Firebug Video Tuts: - Editing HTML - Javascript Errors - Logo Changes

Video tutorials on how to use Firebug, its what we use Smiley
Pages: [1] Go Up Print 
RocketTheme  |  General  |  Free/GPL/Tutorials Discussions  |  Topic: Roklatest customisation question for Rokwebify « previous next »
Jump to:  

Want to see some great examples of the kind of sites that can be built on RocketTheme templates? Check out our RocketTheme Community Showcase award page and find out. Have a site of your own that you think is worthy? Submit it in the current Showcase nomination thread in the members forums.