Change Margin Colour

[petewadey]

I am using default curve theme on smf 2.0.15
I would like to change the margin (boarder) colour on my test site to bright red, so as to easily tell which site I am on when switching from test to live.
Is there a simple way of doing this?

[Antes]

Can you visually elaborate the place you want to change?

[petewadey]

The wrapper you see around this same theme used here. It's blue at the top going to white at the bottom. Maybe that is a difficult colour to change? Even the horizontal dark blue dividing lines would do. Anything that would stand out to let me know I'm on my test site.

[Gwenwyfar]

Try looking for the following in index.css:

Code Select Expand

body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;

Replace it with

Code Select Expand


body
{
background: #cb6c6c;


[petewadey]

Thanks for your help. Unfortunately that only colours the very top band, not the whole surround, so not good for warning me I'm on my test site.
I found a theme, KIRMIZI , that is curved, and very reds. As long as it works with the responsive curve mod I'm happy to use that instead.

[Gwenwyfar]

Unless you did not replace the "body" background, it should change the entire background.

[Antes]

If you just need an indicator to show that you are in the test site do something like this;

Open your Index.template.php

Code (Find) Select Expand

function template_body_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;

Code (Add After) Select Expand


   // Test site indicator
   echo '<div class="test_indicator"></div>';

Open Index.css and add the following to the end of the file.

Code Select Expand

/* Test Site Indicator */
.test_indicator {
   color: #FFF;
   background: red;
   padding: 7px;
   margin: 0 0 10px 0;
   text-align: center;
   position: fixed;
   top: 0;
   z-index: 99;
}
.test_indicator:after {
   content: "## Test Site ##";
   font-size: 150%;
}

[petewadey]

Unless you did not replace the "body" background, it should change the entire background.

I copied and pasted where you indicated, including the ; could that be the problem???

If you just need an indicator to show that you are in the test site do something like this;

Open your Index.template.php

Code (Find) Select Expand

function template_body_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;

Code (Add After) Select Expand


   // Test site indicator
   echo '<div class="test_indicator"></div>';

Open Index.css and add the following to the end of the file.

Code Select Expand

/* Test Site Indicator */
.test_indicator {
   color: #FFF;
   background: red;
   padding: 7px;
   margin: 0 0 10px 0;
   text-align: center;
   position: fixed;
   top: 0;
   z-index: 99;
}
.test_indicator:after {
   content: "## Test Site ##";
   font-size: 150%;
}

Would that indicator float and always be on screen? If so, that could be an option. Thanks

[Antes]

It has a fixed position, it`ll stay on top-left all the time.

[petewadey]

Not an option then I'm afraid. Thanks for trying anyway. I appreciate the help
Pete

[petewadey]

Thinking about it. It would make more sense to change the colour of the dark blue horizontal dividers, like the quick reply one below. They appear on all pages including gallery. What would I be looking for to change that?

[Looking]

...so as to easily tell which site I am on when switching from test to live.

If that is your main aim just put <h3></h3> tags at top of your template with 'test' or something similar.

[petewadey]

Where would that show on the pages? Would it be obvious?

[lurkalot]

Why not just add a glaringly obvious logo to your test site.  Then you won't have to modify anything.

[petewadey]

I take it from the replies so far that there is no way of changing the colour of the part I would have liked to, so I will just have to keep an eye on the web address bar to know which site I'm working on. Shame, but thanks anyway.

[Shambles]

Why not have a range of different cursor images and/or colours on your test site?

[Antes]

Did you test the code I wrote for you? It sticks the browser window's top-left, not the site`s.

[petewadey]

I've not tried it yet, but probably will in a few days time. As a temporary measure I've changed some of the text to red. That might be enough. I'm waiting to here from my moderators who will also have access to my test site.
Thanks for your help. Very much appreciated

[drewactual]

for any value it may have, i had a duplicate problem to solve as you have.  i wasn't as worried about cross-contaminating as i was for some others doing so....

as a result, i did something that worked out well that perhaps you may consider.


add to the end of your #wrapper rule:

Code Select Expand


border: 3px solid red;


add to the end of your Body rule:

Code Select Expand


background:#000;


better yet, make the background #bbb and the border 5px wide... you'll also have to comment out the prior background declaration in the body tag because of the image called.

i no longer have this test bed hosted live, but it worked well.  the wrapper- what is on this page you're looking at currently has the content with a red border of sizable distinction instead of a grayish border... between it and the edge of your screen is black... everything found within the wrapper (content) looks the same as it does now.    image example attached using 3px border and black. 

[petewadey]

Thanks. So if I just wanted to make the body rule red (the bit you made black), how would I do that?

[drewactual]

if you're using the curve theme such as here, go to your CSS file and:

find:

Code Select Expand


body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}


replace with:

Code Select Expand


body
{
background: red; /*#E9EEF2 url(../images/theme/backdrop.png) repeat-x;*/
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}


if you want to change it back, remove the "red;" and both sets of /* (opening commented out section) and */ (which closes a commented out section)- you're back to stock, then.

the original post instructing you to do this should have worked- I'm willing to bet your css is cached somewhere that didn't show you the live change... so... after you alter it as described in both posts, hold shift hit refresh to see the changes.

[petewadey]

That is brilliant, thank you so much. The original post for some reason only changed a band at the top, now my whole background is red. You are a star.
Pete

[Gwenwyfar]

That is brilliant, thank you so much. The original post for some reason only changed a band at the top, now my whole background is red. You are a star.
Pete

Both are exactly the same thing. You probably edited something wrong.

[drewactual]

Yeah, even the refresh doesnt make sense if there was a bar across the top... Gonna hafta write that one off to the "wth?" column, no?