Download: Fenix Cyan IPB Skin

[Heosforo]

File Name: Fenix Cyan IPB Skin
File Submitter: Heosforo
File Submitted: 18 Jan 2012
File Category: Color-Theme Skins

This is a cyan color skin based on fenix skin. (by request) and was made with 3.2.3 version.
Included a recent comments block (in footer). You must have IP.Content to use this block.

Demo Account:
User: Demo
Password: demo

Click here to download this file

[d4rkcry3r]

Hello, first of all thanks for making the cyan color skin based of your previous skin. :smile:

I wonder how to center my header logo? I have a bit big header, so when I tried to center it, search bar and admin CP are messed.

Can guide me how to fix it? My forum link.

Thank you.

[Heosforo]

something like this?

[d4rkcry3r]

something like this?

Yes exactly! Mind to teach me how to do that? :ahappy:

Thank you.

[Heosforo]

Let's see if this works

- go to: Look & Feel > Manage Skin Sets & Templates > Fenix Cyan
- open ipb_styles.css
- find this:

#branding {

/*background: #0f3854 url({style_images_url}/branding_bg.png) repeat-x;*/

/*border-bottom: 1px solid #1b3759;*/

min-height: 100px;

}

replace with this:

#branding {

background: transparent url({style_images_url}/header.png) no-repeat 140px 2px;

min-height: 300px;

}

Below that you will see this:

#logo { display: inline; }

replace with this:

#logo { display: none; }

You can use this image if you want, just rename it to header.png

let me know if doesn't work to see another way.

[Heosforo]

I forgot to mention, you'll need to upload the image to fenix_cyan folder

[d4rkcry3r]

Yes, it's working! Thank you. :huggles:
Hem, another question, how to change the width of skin? I tried to change at ipb_styles.css, but not working.

[Heosforo]

The same steps, but in this case you'll need to open fenix_cyan.css
and find this:

.fenix-wrapper {width: 980px; margin: auto;}

there you can change the width ------------------------------------------------ I recommend you if you're going to put more width better change this: (in ipb_styles.css)

#branding {

background: transparent url({style_images_url}/header.png) no-repeat 140px 2px;

min-height: 300px;

}

to this:

#branding {

background: transparent url({style_images_url}/header.png) no-repeat 50% 2px;

min-height: 300px;

}

in that way the image will stand more to the center