Horizontal block of color... Can it be done?

Lou Gonzalez · October 29, 2013

I'd like to create a hoizontal band/block of color, where I can place text. For the life of me I can't figure out how to do it. Any ideas? I don't want to use a photo for this, and I'd like it to span the entire width of the screen, no matter the width.

Here's an example of what I want to do. http://vsco.co/film

When you go to that site, scroll down a little bit and you will see an olive green bar with text. That's what I'd like to do on my home page.

Is that possible?

Allen · October 29, 2013

Lou Gonzalez wrote: »

I'd like to create a hoizontal band/block of color, where I can place text. For the life of me I can't figure out how to do it. Any ideas? I don't want to use a photo for this, and I'd like it to span the entire width of the screen, no matter the width.

Here's an example of what I want to do. http://vsco.co/film

When you go to that site, scroll down a little bit and you will see an olive green bar with text. That's what I'd like to do on my home page.

Is that possible?

Have you tried adding a text block in the position where you want it? If only on your
homepage make sure you highlight "homepage" on right.

Lou Gonzalez · October 29, 2013

I have just added a text block, but it doesn't appear to allow me to set the background color. It's defaulting to white. I set the left and right margin to zero and container width to 100% but its still not going to the outer edges.

Check it out: http://photos.fernandogonzalez.net/

So I just went in and added some html and it sort of accomplished what I want. However same thing with the margins... when set to zero and container width of 100%, its still not going out to the edge.

Any other ideas?

ChancyRat · October 29, 2013

Lou Gonzalez wrote: »

I have just added a text block, but it doesn't appear to allow me to set the background color. It's defaulting to white. I set the left and right margin to zero and container width to 100% but its still not going to the outer edges.

Check it out: http://photos.fernandogonzalez.net/

So I just went in and added some html and it sort of accomplished what I want. However same thing with the margins... when set to zero and container width of 100%, its still not going out the edge.

Any other ideas?

On the HTML block, top highlighted bar, you can click the wrench to edit settings and content, or a little triangle that is margins. Try changing left and right to zero, or even a negative number to go further left and right.

Would you post your code for the html color that you set in place? Clever idea. I had guessed you would input a <div> of some sort with a background color?

Lou Gonzalez · October 29, 2013

ChancyRat wrote: »

On the HTML block, top highlighted bar, you can click the wrench to edit settings and content, or a little triangle that is margins. Try changing left and right to zero, or even a negative number to go further left and right.

Would you post your code for the html color that you set in place? Clever idea. I had guessed you would input a <div> of some sort with a background color?

Read my 1st reply. I did set the margins to zero for both the text block and the html block, however I never thought to set them to a negative number, so I tried that as well. It made no difference. <img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif" border="0" alt="" >

Here's my html block code:

[HTML]<table width="100%" border="0" class="ctr">
<tr>
<td style="background-color: #CC9900;">HTML</td>
</tr>
</table>[/HTML]

And the CSS:

<style type="text/css">
<!--
.ctr {
  text-align: center;
}

-->
</style>

ChancyRat · October 29, 2013

Lou Gonzalez wrote: »

I have just added a text block, but it doesn't appear to allow me to set the background color. It's defaulting to white. I set the left and right margin to zero and container width to 100% but its still not going to the outer edges.

Check it out: http://photos.fernandogonzalez.net/

So I just went in and added some html and it sort of accomplished what I want. However same thing with the margins... when set to zero and container width of 100%, its still not going out to the edge.

Any other ideas?

As you can see I'm somewhat in the dark myself, but have you tried, in site customize mode, on the right, Layout tab, removing any side margins? see you can set margins separately in the homepage, or in all folders, all galleries, or just one gallery.

Lou Gonzalez · October 29, 2013

I forgot there was a separate setting there in the layout tab, so I did reduce that to zero as well. It's better, but still not to the edge of the screen. Hmmm.

ChancyRat · October 29, 2013

You definitely need a SM wizard to help at this point. Just an aside, did you see that your logo re-sizes this way? In this image a bigger browser window put the logo above the frame line. When I resize the browser down, the logo jumps to inside the frame.

Lou Gonzalez · October 29, 2013

Oh thank you! I will fix that asap.

EDIT: All fixed now.

ChancyRat · October 29, 2013

Lou Gonzalez wrote: »

Oh thank you! I will fix that asap.

EDIT: All fixed now.

HEY, your color bar is now fixed!

ChancyRat · October 29, 2013

There's nothing like successfully fixing a broken something when you don't understand it and have no clue. What a nice feeling.

Lou Gonzalez · October 29, 2013

ChancyRat wrote: »

There's nothing like successfully fixing a broken something when you don't understand it and have no clue. What a nice feeling.

Not quite. I want it to go to the very edge of the screen. There's still a gap on the left and right.

ChancyRat · October 29, 2013

Lou Gonzalez wrote: »

Not quite. I want it to go to the very edge of the screen. There's still a gap on the left and right.

Oh, boo to you.

I thought you wanted the color to reach to the same place as the two grey lines above and below it. Those stop before the edge as well.

Okay, my site has a bar under the top nav and it also stops just short on the left and right.
Try this: go to edit entire site. Do you have a top navbar? Something at the top? If so click to edit the margins there, and make the L and R, zero.

Lou Gonzalez · October 29, 2013

ChancyRat wrote: »

Oh, boo to you.
I thought you wanted the color to reach to the same place as the two grey lines above and below it. Those stop before the edge as well.

Okay, my site has a bar under the top nav and it also stops just short on the left and right.
Try this: go to edit entire site. Do you have a top navbar? Something at the top? If so click to edit the margins there, and make the L and R, zero.

Tried what you said and got my 1 stroke dividers to the edge of the screen. Yay! Thanks.

Now all I need to do is figure out how to do the body portion. It is set to strechy and 0 margins on the side. Hmmm.

ChancyRat · October 29, 2013

Body means what? Try tweaking the triangle arrow of the block. I did this and successfuly made negative margins for left and right. However I'm not sure if body is tweakable. I know there are some settings, esp. gallery styles, that have some unmodifiable qualities.

Lou Gonzalez · October 29, 2013

Lou Gonzalez wrote: »

Tried what you said and got my 1 stroke dividers to the edge of the screen. Yay! Thanks.

Now all I need to do is figure out how to do the body portion. It is set to strechy and 0 margins on the side. Hmmm.

Got it.

Apparently the in the Layout settings, you can put a negative value, but in the actual element on the page, you can't. Go figure. So I did a -20 on the margins and now it fills the space. Nice!

Thanks for your help ChancyRat!

ChancyRat · October 29, 2013

I cannot tell you how much FUN it is to figure out a problem when you have no idea what you did.

Horizontal block of color... Can it be done?

Comments