Ambassador

[Bocool]

So, you are saying remove the background from .titlebg?

[TwitchisMental]

So, you are saying remove the background from .titlebg?

Yes you seem to have a background on every instance of it.

All of these -

Code Select Expand

h4.titlebg, .titlebg, h4.subbg, .subbg {
    background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
    color: #555;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
}
.titlebg {
    background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
    color: #555;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
    border: none;
}
h3.titlebg {
    background: linear-gradient(to bottom, #ffde74 10%, #5c331e 90%);
    color: #000;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
h4.titlebg {
    background: linear-gradient(to bottom, #ffde74 10%, #5c331e 90%);
    color: #000;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
No need for the background on them.

It should be under .title_bar like so

Code Select Expand

.title_bar {
/*    border: 1px solid #ddd;
    border-top: 2px solid #ff9400;
    border-bottom: 2px solid #bf6900; */
    background: linear-gradient(to bottom, #ffde74 10%, #5c331e 90%);
    color: #666;
    border-radius: 2px 2px 0 0;
    margin: 5px 0 0 0;
}
Wouldn't hurt to add this aswell for the links -

Code Select Expand

.title_bar a {
    color: #000;
    text-decoration: none;
}


[Bocool]

Okey, dokey... I'll remove them.

Btw, I've changed the moderation link color to black. Only the exclamation point. It should stay like that until you approve it, correct?

Code Select Expand

a.moderation_link, a.moderation_link:visited {
  font-weight: bold;
  padding: 0px 6px;
  background: #BD9851;
  color: #000;
}

[TwitchisMental]

Okey, dokey... I'll remove them.

Btw, I've changed the moderation link color to black. Only the exclamation point. It should stay like that until you approve it, correct?

Code Select Expand

a.moderation_link, a.moderation_link:visited {
  font-weight: bold;
  padding: 0px 6px;
  background: #BD9851;
  color: #000;
}

That works.  Yes it will show the icon until the topic and/or post has been approved.

[TwitchisMental]

Alright this should resolve the title_bar stuffs .

Find -

Code Select Expand

/* TitleBar & SubBar */
.title_bar {
/* border: 1px solid #ddd;
border-top: 2px solid #ff9400;
border-bottom: 2px solid #bf6900; */
background: #1b1b1b;
color: #666;
border-radius: 2px 2px 0 0;
margin: 5px 0 0 0;
}
.sub_bar {
border-bottom: 1px solid #000;
text-shadow: none;
background: none;
clear: both;
}
h3.subbg,h4.subbg, .subbg {
background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
color: #ddd;
font-family: "Tahoma", sans-serif;
font-weight: bold;
overflow: hidden;
padding: 6px 12px 5px 12px;
text-shadow: none;
}
h3.titlebg, h4.titlebg, .titlebg {
background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
color: #555;
font-family: "Tahoma", sans-serif;
font-weight: bold;
overflow: hidden;
padding: 6px 12px 5px 12px;
text-shadow: none;
}
.titlebg {
background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
color: #555;
font-family: "Tahoma", sans-serif;
font-weight: bold;
overflow: hidden;
padding: 6px 12px 5px 12px;
text-shadow: none;
border: none;
}

.subbg a {
background: none;
color: #808080;
text-decoration: none;
}
.titlebg a {
background: none;
color: #000;
text-decoration: none;
}
.title_bar + .windowbg, .title_bar + .roundframe {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

Replace With

Code Select Expand

/* TitleBar & SubBar */
.title_bar {
    border: none;
background: linear-gradient(to bottom, #ffde74 10%, #5c331e 90%);
color: #666;
border-radius: 2px 2px 0 0;
margin: 5px 0 0 0;
}
.sub_bar {
border-bottom: 1px solid #000;
text-shadow: none;
background: none;
clear: both;
}
h3.subbg, h4.subbg, .subbg {
background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
color: #ddd;
font-family: "Tahoma", sans-serif;
font-weight: bold;
overflow: hidden;
padding: 6px 12px 5px 12px;
text-shadow: none;
}
h3.titlebg, h4.titlebg, .titlebg {
color: #000;
font-family: "Tahoma", sans-serif;
font-weight: bold;
overflow: hidden;
padding: 6px 12px 5px 12px;
text-shadow: none;
}

.subbg a {
background: none;
color: #808080;
text-decoration: none;
}
.titlebg a {
background: none;
color: #000;
text-decoration: none;
}
.title_bar + .windowbg, .title_bar + .roundframe {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

[Bocool]

I've been debating whether I should add a little spacing below the wrapper...

[TwitchisMental]

I've been debating whether I should add a little spacing below the wrapper...

You could if you wanted to follow the original.

[Bocool]

Adding a color to this make the text black and hard to read. Removing it turns it to gold:

Code Select Expand

.titlebg a {
    color: #000;
    text-decoration: none;
}

[Bocool]

I've been debating whether I should add a little spacing below the wrapper...

You could if you wanted to follow the original.

Well, for the most part, yes, I want it to look like the original. However, I've been looking for ways to 'modernize' the themes a bit but without losing the original look.

[TwitchisMental]

Adding a color to this make the text black and hard to read. Removing it turns it to gold:

Code Select Expand

.titlebg a {
    color: #000;
    text-decoration: none;
}

Yes because the background is not gold like it should be.

Try doing the following -

Find -

Code Select Expand

/* TitleBar & SubBar */
.title_bar {
/*    border: 1px solid #ddd;
    border-top: 2px solid #ff9400;
    border-bottom: 2px solid #bf6900; */
    background: #1b1b1b;
    color: #666;
    border-radius: 2px 2px 0 0;
    margin: 5px 0 0 0;
}
.sub_bar {
    border-bottom: 1px solid #000;
    text-shadow: none;
    background: none;
/*    box-shadow: 0 -1px 0 #999 inset; */
    clear: both;
}
h3.subbg, .subbg {
    background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
    color: #ddd;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
}
h4.titlebg, .titlebg, h4.subbg, .subbg {
    background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
    color: #555;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
}
.titlebg {
    background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
    color: #555;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
    border: none;
}
h3.titlebg {
    background: linear-gradient(to bottom, #ffde74 10%, #5c331e 90%);
    color: #000;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
h4.titlebg {
    background: linear-gradient(to bottom, #ffde74 10%, #5c331e 90%);
    color: #000;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.subbg a {
    background: none;
    color: #808080;
    text-decoration: none;
}
.titlebg a {
    background: none;
    color: #000;
    text-decoration: none;
}
.title_bar + .windowbg, .title_bar + .roundframe {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
Replace With -

Code Select Expand

/* TitleBar & SubBar */
.title_bar {
    border: none;
    background: linear-gradient(to bottom, #ffde74 10%, #5c331e 90%);
    color: #666;
    border-radius: 2px 2px 0 0;
    margin: 5px 0 0 0;
}
.sub_bar {
    border-bottom: 1px solid #000;
    text-shadow: none;
    background: none;
    clear: both;
}
h3.subbg, h4.subbg, .subbg {
    background: #202020 url(../images/theme/main_block.png) no-repeat 0 -120px;
    color: #ddd;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
}
h3.titlebg, h4.titlebg, .titlebg {
    color: #000;
    font-family: "Tahoma", sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 6px 12px 5px 12px;
    text-shadow: none;
}

.subbg a {
    background: none;
    color: #808080;
    text-decoration: none;
}
.titlebg a {
    background: none;
    color: #000;
    text-decoration: none;
}
.title_bar + .windowbg, .title_bar + .roundframe {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

I've been debating whether I should add a little spacing below the wrapper...

You could if you wanted to follow the original.

Well, for the most part, yes, I want it to look like the original. However, I've been looking for ways to 'modernize' the themes a bit but without losing the original look.

Fair enough, wasn't sure how close to the original you want it. I think the footer looks fine as is for the most part.

I think there is a better way to place it and could minimize how many lines there are though.

[Bocool]

I'm open...what's the better way?

Btw, I've changed the border-radius to match the the rest of the bars on the home page.

Code Select Expand

.title_bar {
  border: none;
 background: linear-gradient(to bottom, #ffde74 10%, #5c331e 90%);
 color: #666;
 border-radius: 6px 6px 0 0;
 margin: 5px 0 0 0;
}


[TwitchisMental]

I'm open...what's the better way?

Btw, I've changed the border-radius to match the the rest of the bars on the home page.

Code Select Expand

.title_bar {
  border: none;
 background: linear-gradient(to bottom, #ffde74 10%, #5c331e 90%);
 color: #666;
 border-radius: 6px 6px 0 0;
 margin: 5px 0 0 0;
}


Oh and add this aswell -

Code Select Expand

.title_bar a {
    color: #000;
    text-decoration: none;   
}

That will make the links in message.index for the title bar visible .

As far as the footer, I would just place it within the wrapper. You can do this in index.template.php .

Similar to my Bend,RadicalRed, or TealSplash Themes.

Then you can get rid of the margin/height trick you are currently using. From there you could then add a margin-bottom to the wrapper to create that space like the original.


Edit: I can make a demo of it on my local server to demo if you would like.

[Bocool]

The footer is already in the wrapper.

Code Select Expand

function template_body_below()
{
global $context, $txt, $scripturl, $modSettings;

echo '
</div><!-- #main_content_section -->
</div><!-- #content_section -->
</div><!-- #wrapper -->
</div><!-- #footerfix -->';

// Show the footer with copyright, terms and help links.
echo '
<div id="footer">
<div class="inner_wrap">';

// There is now a global "Go to top" link at the right.
echo '
<ul class="centertext">
<li><a href="', $scripturl, '?action=help">', $txt['help'], '</a> ', (!empty($modSettings['requireAgreement'])) ? '| <a href="' . $scripturl . '?action=agreement">' . $txt['terms_and_rules'] . '</a>' : '', ' | <a href="#top_section">', $txt['go_up'], ' &#9650;</a></li>
<li>Original Ambassador by <a href="https://www.jpr62.com/theme/" target="_blank" class="new_win" title="Crip Zone">Crip</a></li>
<li>Updated to v2.1.3a by <a href="https://www.jpr62.com/theme/" target="_blank" class="new_win" title="The Crip Zone Team">The Crip Zone Team</a></li>
<li>', theme_copyright(), '</li>
</ul>';

// Show the load time?
if ($context['show_load_time'])
echo '
<p class="centertext">', sprintf($txt['page_created_full'], $context['load_time'], $context['load_queries']), '</p>';

echo '
</div>
</div><!-- #footer -->';

}

[Bocool]

Um, the bottom should have:

Code Select Expand

echo '
</div><!-- #footer -->
</div><!-- #wrapper -->';

[TwitchisMental]

It is not currently within the wrapper.

I have attached the index.template.php which will place it properly.

Then its a matter of adjusting the css .



[attachment deleted by admin]