Themes

Posted by Gary Cunningham-Lee 04 Jun 2016 15:02 GMT-0000

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

Posted by John Morris 04 Jun 2016 15:22 GMT-0000

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;
}

Posted by Gary Cunningham-Lee 04 Jun 2016 15:34 GMT-0000

Sorry, my mistake.

#row-middle { background: #fff; }

should be

.row-middle { background: #fff; }

-- Gary

Posted by John Morris 04 Jun 2016 15:41 GMT-0000

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!

Posted by Gary Cunningham-Lee 04 Jun 2016 16:03 GMT-0000

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