Loading...
 

Themes


Inserting image full width top area

United States

Tiki 15.0
Theme: Utopia
http://thepatriotwoodwiki.org/HomePage

Dear Tiki gurus
I have a new dilemma with our theme. With the help of the Tiki gurus here I was able to make the top of our theme have a black strip. Now we have changed our theme on our home website to have a flag banner at the top stretching across.

Here is our community website with the flag across at http://thepatriotwoodworker.com/

We would like to duplicate that here at http://thepatriotwoodwiki.org/HomePage

Here is the custom code we already have thanks to the help from the gents here on this forum.

body { 
-webkit-box-shadow: inset 0 195px 0 0 rgba(0,0,0,1);
-moz-box-shadow: inset 0 195px 0 0 rgba(0,0,0,1);
box-shadow: inset 0 195px 0 0 rgba(0,0,0,1);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #000000;
  background-color: #5C594A;
}
#top_modules,
#topbar_modules,
#pagebottom_modules {
  background: #000
}


Can you help me change it up so that we may have our flag at the top? I experimented with this:

}
#top_modules,
#topbar_modules,
#pagebottom_modules {
  background: url(http://thepatriotwoodworker.com/uploads/monthly_2016_05/stars_and_stripes.jpg.e0837ceb7e0d972fd7ae5fdf7a9b1c84.jpg);
}


at our test site at http://tpwtestuser.com/tiki/HomePage but as you can see it only spanned the center and not the sides.
I sure could use some help about now. Thanks for any suggestions.
John

Japan

Hi,

You can insert the image like this: first of all, remove the three lines of box-shadow rules for the body tag. These aren't needed when you use the flag background. (But I'd copy, paste and save them somewhere in case you want to have that appearance again in the future.) Then add these rules:

body {
background: #000 url(http://thepatriotwoodworker.com/uploads/monthly_2016_05/stars_and_stripes.jpg.e0837ceb7e0d972fd7ae5fdf7a9b1c84.jpg) no-repeat;
background-size: 100% 196px;
}


(I just copied and pasted that URL for the image. You may have to correct it if it doesn't work as is.)

Now, if you want to replicate the appearance pretty exactly, there's a problem because the top modules zone has a white background, rather than the transparent background of the forums site. To get that appearance, add this rule:

.container { background: transparent; }

But this makes the entire container transparent. To recover the white background of the content areas other than the top module zone, add this rule:

#row-middle { background: #fff; }

The text color in the top modules zone needs some adjustment to be seen better against the flag background, so you can add this:

#top_modules h2 { color: #fff; }

I think that'll do it.

-- Gary


United States

Thanks Gary!!!! I am still getting some transparency though, I added my entire custom code here just in case something is conflicting, can you review? But I did add the new body tag section with the rules and at http://tpwtestuser.com/tiki/HomePage you'll see the issues.

body {
background: #000 url(http://thepatriotwoodworker.com/uploads/monthly_2016_05/stars_and_stripes.jpg.e0837ceb7e0d972fd7ae5fdf7a9b1c84.jpg) no-repeat;
background-size: 100% 196px;
}
.container { background: transparent; 
}
#row-middle { background: #fff; 
}
#top_modules h2 { color: #fff; 
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #000000;
  background-color: #000;
}
.navbar-default {
  background-color: #000;
  border-color: #000;
}
.panel-default > .panel-heading {
  color: #FFFFFF;
  background-color: #262e33;
  border-color: #262e33;
}
.panel {
  background: #fff;
  border: 0px solid;
}
.panel-title {
  color: #fff;
  font-size: 100%;
}
#page-data img {
    margin: 5px;
}

Japan

Sorry, my mistake.

#row-middle { background: #fff; }

should be

.row-middle { background: #fff; }

-- Gary


United States

That did it Gary! Thanks so much!
So, a little lesson I need here, what is the difference between (.) and (#)? Thanks Gary. I can look it up too but you want to answer that is fine, thanks for your help Gary, I really appreciate it!


Japan

If you have a div (essentially a container), you can give it a class or an id or both. In the related CSS rules, div.middle refers to a div whose class is "middle", and div#middle refers to a div whose id is "middle"; "div.middle" can be written as ".middle" if there aren't any other page elements with the class "middle". If there are (like div.middle, ul.middle, etc.), then ".middle" would refer to all of them, which you may not want (although you might, depending on the situation).

A CSS class is used when there might be multiple instances of it and you want the rules to apply to all of them, such as Tiki's modules, which all have a "module" class. There can be only one id with a particular name on a page (so only one "div#middle" is permitted on a page, for example) for the HTML to be valid.

The best practice is to assign styling rules to classes rather than to ids, because a rule given to an id is so strong it's hard to make exceptions to that rule within the id (so if there's a div class="middle" id="middle", any style rules should be assigned to .middle, and #middle should instead be used for JavaScript use, navigation anchors, etc.

In stylesheets, the syntax is div.middle and div#middle (or .middle and #middle). In HTML, the syntax is div class="middle" and div id="middle".

-- Gary

United States
Thank you sir Gary!! Thanks so much as always. This is foreign to me, but I actually understand this, and my creative mind is now spurred ahead, thanks Gary.

Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.