Simple Machines Community Forum

SMF Support => SMF 2.0.x Support => Topic started by: Jacky.vdv on September 04, 2021, 06:37:58 PM

Title: Layout help, pics and color change
Post by: Jacky.vdv on September 04, 2021, 06:37:58 PM
I'm adjusting the layout and will unfortunately come here a few times asking for help sorry.

Where can I find this pic and color?


1
Quote(https://i.postimg.cc/7LkyBXKR/corner.jpg)


2
Quote(https://i.postimg.cc/mgxxD8Wr/corner1.png)


3
Quote(https://i.postimg.cc/WzDKpJ9r/corner2.jpg)

4
Quote(https://i.postimg.cc/HWKRZBxt/corner3.jpg)

5
Quote(https://i.postimg.cc/0NcHpCFD/corner4.jpg)

Title: Re: Layout help, pics and color change
Post by: Arantor on September 04, 2021, 06:46:34 PM
1 and 4 are Themes/default/images/theme/main_block.png
2 and 3 are Themes/default/images/theme/menu_gfx.png

5, quickest way is for you to go to your browser, right click on it and select 'Inspect Element' and it'll show you the code used and where. In this case, Themes/default/css/index.css around lines 464 onwards:

.windowbg, #preview_body
{
color: #000;
background-color: #e7eaef;
}
.windowbg2
{
color: #000;
background-color: #f0f4f7;
}

.windowbg and .windowbg2 define the colours for a variety of places in SMF 2.0. It's reused quite a bit.
Title: Re: Layout help, pics and color change
Post by: Sir Osis of Liver on September 04, 2021, 06:51:57 PM
Use your browser's inspect element to view the css, or print screen and load screenshot into image editor to get colors.  Title bars are from sprite main_block.png.
Title: Re: Layout help, pics and color change
Post by: Jacky.vdv on September 04, 2021, 07:46:45 PM
Nr1: Rounding the corner and nr4  pfff damn it That's not easy  :o
I'll leave the mainblock original, my god :o  ::)


(https://i.postimg.cc/jSSLvHjt/corner5.jpg)
Title: Re: Layout help, pics and color change
Post by: Antechinus on September 04, 2021, 07:56:21 PM
Use the PSD. :)

https://custom.simplemachines.org/index.php?theme=2428#cs_packages

Download the Curve_20_final_PSD.zip (https://custom.simplemachines.org/index.php?action=download;theme=2428;attach=178939) from that page. Then you can just change the colours in Photoshop, and save the result as a PNG again.
Title: Re: Layout help, pics and color change
Post by: shadav on September 04, 2021, 09:11:59 PM
personally I just ditch all the images and just use css for color and border radius instead
Title: Re: Layout help, pics and color change
Post by: Antechinus on September 04, 2021, 09:26:52 PM
Yes you can do that too. Depends what result you want. If you want to match the default Curve look and aren't much good at CSS, editing the image may be easier.
Title: Re: Layout help, pics and color change
Post by: Jacky.vdv on September 06, 2021, 12:00:01 PM
I give up and wait for 2.1, that turns out to be easier to adjust colors
Title: Re: Layout help, pics and color change
Post by: Kindred on September 06, 2021, 10:39:05 PM
Well, 2.1 final is not going to be any easier, since we are not adding any new functionality between rc4 and final
Title: Re: Layout help, pics and color change
Post by: Sir Osis of Liver on September 06, 2021, 11:19:32 PM
If you just want to fix the wonky corners, it's easy.  This sets your background color -

index.css


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


Then you have to recolor the corners in the applicable portion of main_block.png, as per attached.