0
Welcome Guest! Login
0 items Join Now

Roklatest customisation question for Rokwebify

Last Post
Search Topic
    • DeeGee's Avatar
    • DeeGee
    • Rocketeer
    • Posts: 64
    • Thanks: 0

    Roklatest customisation question for Rokwebify

    Posted 17 years 1 month ago
    • 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!
    #116144

  • Re: Roklatest customisation question for Rokwebify

    Posted 17 years 1 month ago
    #116170
    • DeeGee's Avatar
    • DeeGee
    • Rocketeer
    • Posts: 64
    • Thanks: 0

    Re: Roklatest customisation question for Rokwebify

    Posted 17 years 1 month ago
    • 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. :-\

      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?
    #116397

  • Re: Roklatest customisation question for Rokwebify

    Posted 17 years 1 month ago
    • I assume you are adding the background to the 'h3' part of the code, add some padding for the same CSS block.
    • James Spencer / Developer & Support / Hull, UK
    #116402
    • DeeGee's Avatar
    • DeeGee
    • Rocketeer
    • Posts: 64
    • Thanks: 0

    Re: Roklatest customisation question for Rokwebify

    Posted 17 years 1 month ago
    • Hi James,

      thanks for your (EVER) quick reply. Amazing :)
      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:
      #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 :o . If you want a screenshot, let me know and I'll provide you with one.
    #116469

  • Re: Roklatest customisation question for Rokwebify

    Posted 17 years 1 month ago
    • Should just be able to increase the padding for this reference
      #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;

      }
    • James Spencer / Developer & Support / Hull, UK
    #116473
    • DeeGee's Avatar
    • DeeGee
    • Rocketeer
    • Posts: 64
    • Thanks: 0

    Re: Roklatest customisation question for Rokwebify

    Posted 17 years 1 month ago
    • Splendid James, thank you! :)

      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)
      #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 ;))
    • Last Edit: 17 years 4 weeks ago by DeeGee.
    #116646

  • Re: Roklatest customisation question for Rokwebify

    Posted 17 years 4 weeks ago
    • Use the following
      #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;
      }
    • James Spencer / Developer & Support / Hull, UK
    #116694
    • DeeGee's Avatar
    • DeeGee
    • Rocketeer
    • Posts: 64
    • Thanks: 0

    Re: Roklatest customisation question for Rokwebify

    Posted 17 years 4 weeks ago
    • Dear James,

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

      :) THANK YOU JAMES! :)

      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... ;)
      #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: 17 years 4 weeks ago by DeeGee.
    #117099

  • Re: Roklatest customisation question for Rokwebify

    Posted 17 years 4 weeks ago
    • You didn't copy my CSS correctly :)
      #accordian h3.toggle-hilite {
      background: url(../images/open.gif) no-repeat scroll 1% 3pt;
      }
    • James Spencer / Developer & Support / Hull, UK
    #117108

Time to create page: 0.060 seconds