Sign Up / Welcome Notice [Deleted]

[Liam23]

My style was set to 980px when using this setup, it is more or less trail error when changing image sizes. The tutorial is just a guideline/template for getting a certain look.

Give me dimensions please.... height/width

 

[Liam23]

Give me dimensions please.... height/width

Bump

 

[Steve F]

It really is up to what your trying to accomplish, the image is just a background you set the width and height in the inline style for the notice..it's all in the first post.

I can't tell you exactly what to use as I have no idea what your trying to do. If you are trying to make it look like what I did, then it is all in the first post.

 

[FredC]

Yeah it takes a bit of tweaking especially if your using a fluid style, you may never get it 100% to your liking..

But i will say that its a great tutorial and has given me some ideas for other notices.. A+ stuff as far as im concerned.

 

[Hackfall]

This is a perfect solution for my new site but when I implement it on my development server the sidebar does not float to the top and sit to the right alongside the notices panel. There's a blank area to the right of the notices panel as if I have an element taking up 100% of the width behind the notices panel. I've tried amending the sidebar and notices css but can't get it to work. I'm clearly missing something simple. Can anyone help.

In the attached image I want the sidebar to fill the grey area. As you can see I'm using Flexile.

 

[Steve F]

Could you send me a link to your site? See if I can see what is causing it.

 

[Liam23]

Could you send me a link to your site? See if I can see what is causing it.

Could you just make me one that goes side to side with flexile theme? Like @Hackfall wants his

 

[Hackfall]

I've solved it by putting the <div class="mainContainer"> </div> below <div class="mainContainer"> and it looks fine. I'll send you a PM with the URL.

Liam, The things that restrict the width are

<img src="/styles/notice-background.png" style="display:block; width:682px;" title="" />

and you can put a rule in Extra.css to set the container width to one that suits your layout.

Appearance >> Styles >> Flexile >> Template >> Extra.css

.scrollContainer, #Notices{

width:690px;

}

Then you just need to make the image notice-background.png to a suitable size.

 

[Liam23]

I've solved it by putting the <div class="mainContainer"> </div> below <div class="mainContainer"> and it looks fine. I'll send you a PM with the URL.

Liam, The things that restrict the width are

<img src="/styles/notice-background.png" style="display:block; width:682px;" title="" />

and you can put a rule in Extra.css to set the container width to one that suits your layout.

Appearance >> Styles >> Flexile >> Template >> Extra.css

.scrollContainer, #Notices{

width:690px;

}

Then you just need to make the image notice-background.png to a suitable size.

am I getting a Pm?

 

[Liam23]

I've solved it by putting the <div class="mainContainer"> </div> below <div class="mainContainer"> and it looks fine. I'll send you a PM with the URL.

Liam, The things that restrict the width are

<img src="/styles/notice-background.png" style="display:block; width:682px;" title="" />

and you can put a rule in Extra.css to set the container width to one that suits your layout.

Appearance >> Styles >> Flexile >> Template >> Extra.css

.scrollContainer, #Notices{

width:690px;

}

Then you just need to make the image notice-background.png to a suitable size.

Can you send me the code you used for your site? I like the look better

 

[Andy.N]

Would be nice if people can share the modifications to this.

 

[Sheldon]

Would be nice if people can share the modifications to this.

Isn't it in the first post? Or are you looking for a different edit within this modification?

 

[Steve F]

The only suggestion I have for those looking for a certain look is to set up a test board and just play with what I provided already. Not every skin is the same and what works for someone may not work for everyone. Its a guide to give an example to what can be done.

 

[Andy.N]

Can you send me the code you used for your site? I like the look better

Isn't it in the first post? Or are you looking for a different edit within this modification?

Was referring to what Liam said above about Hackfall edit looks better. Without a screenshot or live site, I just want to see what he did

 

[Liam23]

Isn't it in the first post? Or are you looking for a different edit within this modification?

We have a edited version

 

[Andy.N]

We have a edited version

I'm just curious of the creative ways people use Steve's instructions for something else beside the signup/welcome.

 

[RobParker]

We're having a few problems with this. Some users using IE9 are seeing a horizontal scrollbar.

Also we have some pages with a sidebar and some without, so the image needs to be 940px wide but sometimes it only needs to be 700px.

This is what we have the code as at the minute:

<img src="/images/notices/words.png" style="display:block; width:940px; height:250px;" title="EXAMPLE" />

 

[wickedstangs]

wow, this is awesome how did I miss it..
How do you get the image centered?

 

[wickedstangs]

also, how do you make this only stay on the front page and not the forum section?

 

[Steve F]

We're having a few problems with this. Some users using IE9 are seeing a horizontal scrollbar.

Also we have some pages with a sidebar and some without, so the image needs to be 940px wide but sometimes it only needs to be 700px.

This is what we have the code as at the minute:

<img src="/images/notices/words.png" style="display:block; width:940px; height:250px;" title="EXAMPLE" />

You may have to run 2 separate notices to obtain the right look. As for the scroll bar, try adding "overflow: hidden;" inline in that code.

also, how do you make this only stay on the front page and not the forum section?

Page Criteria tab: Content Template is

forum_list

Edit: read that backwards.

Page Criteria tab: Selected Navigation Tab is

home

On centering the image, maybe try a <center>image</center> tag..