Need to customize Tiger theme

RapidWeaver Classic Themes
1

So a few questions;
I’m new to RW and developing a basic site. Right now it is using Tiger & I need to know 2 things.

  1. Need to replace the header and button graphics. I haven’t been successful at changing the CSS or displacing it using the code section.
  2. What is the difference between Tiger and Tiger Pop?
2

For the button graphics, I have no solution, perhaps later :wink:
Put your image in the Resource and this code in CSS, you can play with the values and top, bottom, center etc.

#pageHeader { background: url(%resource(evening.jpeg)%); background-position: center; height: 171px; border-bottom: 0px; }

The difference is in the menu, in the sub pages.

Tiger

Tiger Pop

Bildschirmfoto 2016-02-26 um 10.58.55.png884×408 44.4 KB

3

For the navigation you can use this code in CSS, change the color.
But, it’s not very beautiful. Perhaps choose better another theme :wink:

#navcontainer #current { background:grey; }

#navcontainer a:hover { background:grey; }

4

Oscar;
Thank You Very Much.

How could I make the Button be a graphic from resource?

Just thought of this this morning – can I move the breadcrumbs to the bottom?

5

Put an image in resources, ca. 200px x 25px and this code to #navcontainer #current

… and I don’t see breadcrumbs in this theme!

#navcontainer #current { background: url(%resource(your_image.jpg)%) no-repeat; }

Bildschirmfoto 2016-02-26 um 17.49.45.png2398×688 346 KB

6

@dapenguin

I forgot. For all states of the menu using these codes in CSS.

#navcontainer #current { background: url(%resource(your_image.jpg)%) no-repeat; }

#navcontainer a:hover { background: url(%resource(your_image.jpg)%) no-repeat; }

#navcontainer a { background: url(%resource(your_image.jpg)%) no-repeat; }

Bildschirmfoto 2016-02-26 um 19.52.08.png1774×752 249 KB

7

So I put this on each page or the global css??

Figured it out - went with global :dancer:

9

Global would save you a bunch of headaches unless yo wish to sty;e your nav differently for different areas…

Brad

10

NA it caused a bunch but it was better :cold_sweat:

To get it (global) to work with the desired results I had to cut & paste and then modify a bunch of stuff from the CSS. Then RW crashed so I had to do it over again - o well :smile_cat:

I’m going to bed now :sleepy:

11

@dapenguin

Try this instead for global

`#navcontainer #current {
background: url(%resource(your_image.jpg)%) no-repeat; !important;
}

#navcontainer a:hover {
background: url(%resource(your_image.jpg)%) no-repeat; !important;
}

#navcontainer a {
background: url(%resource(your_image.jpg)%) no-repeat; !important; 
}`

If you are copying from this message, make sure you paste it in the global css area using Edot -> Paste as plain text so that no formatting is retained and causes problems. You can also afterwards, select the CSS and go to File -> Ignore formatting…

Also, the your_image.jpg must be in the root of the Resources area or if you add them to a sub-folder in Resources then you have to add that to the path in the css.

HTH
Brad

12

@dapenguin

If you put it globally, you have it in all sides equal. Works for me without problems!
You can still have other menus on certain pages. Look page 3 in demo.
I tested everything with me, works very well.
Look here!

There is an additional code, now it’s perfect. I put it to the other codes, in global CSS.

#navcontainer .currentAncestor { background: url(%resource(your_image.jpg)%) no-repeat; }

13

@Turtle
Hello Brad
For me, !important is not necessary.
Look here!

1 Like