On the Beach

[Mr.Truckman]

Link to the theme


Detailed design emphasizes simplicity and comfort. Add a header image and the image below. So that the user can change the banner image of a user friendly interface. But still unique to the original structure of Simple Machines Forum "and it can be customized as needed".

You can change the header image and  bottom image. / Themes / On the Beach / images / banner




New On the BeachV2

demo:  On the BeachV2
Download On the Beach V2 Free!

[CrissyUK]

Hi,

I changed the images for the top banner, footer and used an image as background for the main menu section but am having problems persuading these to resize when browsing the forum on mobile devices (Android phone and small iPad).

Please could you help me with the css?

The url for my test forum is  http://cristinalciati.com/NewMRC1/

Thank you in advance   

Crissy

[Mr.Truckman]

Hello CrissyUK

The simplest solution You need to resize the forum as px.
sample
Size forum 90%
Change to 1240 px

Thanks.

[DEEPSNUYB]

Great theme!  simplistic and easy on the eyes.  i am new to smf.  please let me know how to change the menu green and forum blue bars to red?  tia.

[Mr.Truckman]

Great theme!  simplistic and easy on the eyes.  i am new to smf.  please let me know how to change the menu green and forum blue bars to red?  tia.

You must to edit the file index.css

*change the menu green

Code Select Expand

/* Styles for the standard dropdown menus.
------------------------------------------------------- */
#main_menu
{
background:#008899;
padding: 0 0.0em;
float: left;
margin: 0;
width: 100%;
padding-bottom:10px;
}

editing " background:#008899;  " To the color you want



*change the forum blue

Code Select Expand

/* Styles for rounded headers.
------------------------------------------------------- */
h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbg
{
overflow: hidden;
height: 31px;
line-height: 31px;
font-size: 1.2em;
font-weight: bold;
}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
}
h3.catbg2 a, h3.catbg2
{
color: #feb;
}
h3.catbg a:hover, h4.catbg a:hover, .table_list tbody.header td a:hover
{
color: #fd9;
text-decoration: none;
}
h3.catbg2 a:hover
{
color: #fff;
text-decoration: none;
}
h3.titlebg a, h3.titlebg, h4.titlebg, h4.titlebg a
{
color: #FFF;
}
h3.titlebg a:hover, h4.titlebg a:hover
{
color: #53616f;
text-decoration: none;
}
h3.catbg img.icon, h4.titlebg img.icon
{
vertical-align: middle;
margin: -2px 5px 0 0;
}
h4.catbg a.toggle img
{
vertical-align: middle;
margin: -2px 5px 0 5px;
}
h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg
{
background:#0080FF; url(../images/theme/main_block.png) no-repeat 100% -160px;
padding-right: 9px;
}
h4.titlebg, h3.titlebg
{
background:#0080FF; url(../images/theme/main_block.png) no-repeat 100% -200px;
padding-right: 9px;
}
h4.titlebg img.icon
{
float: left;
margin: 5px 8px 0 0;
}
div.cat_bar
{
background: #0080FF; url(../images/theme/main_block.png) no-repeat 0 -160px;
padding-left: 9px;
height: 31px;
overflow: hidden;
margin-bottom: 1px;
border-radius: 5px;
}
div.title_bar
{
background: #0080FF; url(../images/theme/main_block.png) no-repeat 0 -200px;
padding-left: 9px;
height: 31px;
overflow: hidden;
margin-bottom: 1px;
border-radius: 5px;
}

/* rounded bars needs a different background here */

editing " background: #0080FF;  " To the color you want

Thank you for using my theme.

[DEEPSNUYB]

Thank you for using my theme.

Thank you for allowing us to use it.

[DEEPSNUYB]

Hi.  just wanted to let you know i made the changes.  the only head bars that did not change colors were the Forum Stats and Users Online bars.  They are still the blue car colors?

[Mr.Truckman]

  You can customize as needed.

I just do not remove credit! If you want to remove credit Please contact me

Thanks

[mulwa]

Nice theme! Very awesome guy.
would it be possible to enlarge the header and the nav menu to be at 100% and the div (which is the section below the nav menu) to be at 90%? Just like this theme
http://custom.simplemachines.org/themes/index.php?lemma=2484
Thank you

[Capn Ryno]

Hi,  love the theme.  Can you add link to menu bar?

[Mr.Truckman]

Hi,  love the theme.  Can you add link to menu bar?

This mod will help you. http://custom.simplemachines.org/mods/index.php?mod=3249

[mulwa]

Mr. Truckman, is there no way that could be done?
would it be possible to enlarge the
header and the nav menu to be at
100% and the div (which is the section
below the nav menu) to be at 90%?
Just like this theme http://custom.simplemachines.org/themes/index.php?lemma=2484
please sir i need your help

[Mr.Truckman]

Mr. Truckman, is there no way that could be done?
would it be possible to enlarge the
header and the nav menu to be at
100% and the div (which is the section
below the nav menu) to be at 90%?
Just like this theme http://custom.simplemachines.org/themes/index.php?lemma=2484
please sir i need your help

You need to edit the file. index.css
Find:

Code Select Expand

/* the content section */
#content_section
{
background: #FFFFFF; url(../images/theme/frame_repeat.png) repeat-y top left;
padding-left: 10px;
}
#content_section div.frame
{
background:#FFFFFF; url(../images/theme/frame_repeat.png) repeat-y top right;
display: block;
padding: 0 10px 0 0;
}
#main_content_section
{
width: 100%;
min-height: 200px;
}


Replace With:

Code Select Expand

/* the content section */
#content_section
{
background: #FFFFFF; url(../images/theme/frame_repeat.png) repeat-y top left;
padding-left: 40px;
}
#content_section div.frame
{
background:#FFFFFF; url(../images/theme/frame_repeat.png) repeat-y top right;
display: block;
padding: 0 40px 0 0;
}
#main_content_section
{
width: 100%;
min-height: 200px;
}


[mulwa]

Mr. Truck man, thank you, that worked for me.
Is there anyway i can make the logo to be centered just like the screenshot below?
And also i would like the user info and the search box to be at the right hand side with the logo at the left hand side for different website. Cause i wanna use this theme on two websites with different header arrangement. Thank you sir

[Mr.Truckman]

  New On the BeachV2

demo:  On the BeachV2
Download On the Beach V2 Free!

[mulwa]

No help for me on the header section. Anyway,
that link of the new theme is not going.

[ashter]

firstly, thanks for a great theme 

i have a small problem in that the header image i use has a dark background colour, where the "log in" etc text appears, which makes the text hard to view,

what do i need to change in the 'themes/on the beach/css/index.css'  file to change the colours of the text shown in the attached pics , to a lighter colour to aid visibility?


e:g the "log in" and "register" are dark blue/red

and in the 2nd pic, "show unread posts ......." etc are dark blue/red

i 'm assuming that index.css is the right file to modify, but i can't find any reference to those sections in the file,

any pointers most welcome   

[coleys0]

Hi Mr Truckman

Firstly, great theme, really easy to change headers and borders and such. Just a quick question I would like to add an background image to the website, could you tell me how to do this please.

Thanks in advance

[ashter]

firstly, thanks for a great theme 

i have a small problem in that the header image i use has a dark background colour, where the "log in" etc text appears, which makes the text hard to view,

what do i need to change in the 'themes/on the beach/css/index.css'  file to change the colours of the text shown in the attached pics , to a lighter colour to aid visibility?


e:g the "log in" and "register" are dark blue/red

and in the 2nd pic, "show unread posts ......." etc are dark blue/red

i 'm assuming that index.css is the right file to modify, but i can't find any reference to those sections in the file,

any pointers most welcome   

in the absence of any replys to this, i have tried changing colours in the index.css files, but not hit on the right part yet ,
so am i looking in the right file with index.css or not ?

if any one can point me in the right direction here it would be much apprciated,

ashter.

[Mr.Truckman]

firstly, thanks for a great theme 

i have a small problem in that the header image i use has a dark background colour, where the "log in" etc text appears, which makes the text hard to view,

what do i need to change in the 'themes/on the beach/css/index.css'  file to change the colours of the text shown in the attached pics , to a lighter colour to aid visibility?


e:g the "log in" and "register" are dark blue/red

and in the 2nd pic, "show unread posts ......." etc are dark blue/red

i 'm assuming that index.css is the right file to modify, but i can't find any reference to those sections in the file,

any pointers most welcome   

Hello,ashter

You must edit File /themes/on the beach/css/index.css
Find:

Code Select Expand

#upper_section
{
padding: 5px;
margin-bottom: 1.5em;
}

Replace With:

Code Select Expand

#upper_section a
{
        color:#FF0000;
padding: 5px;
margin-bottom: 1.5em;
}

Thank you!