Customizing the CSS

chess69

Joined: 2012-05-19
Posts: 16

Posted: Sat, 2012-05-19 13:52

first up, apologies if this topic has been covered or is somewhere else on these forums (for the life of me i can not find it!) but as the title says i want to customize the default (WIND) theme.

It does everything i need, its simple, straight forward and easy to use but i just want to add my own colors and graphics.
However i just cant find what CSS file controls what on the screen.

Ive tried using FIREBUG but to no avail, in the inspector it shows that there is no link in the HEAD for the css path or even name!

Any help or suggestions would be greatly appreciated!

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sat, 2012-05-19 15:25

You can always add your own override <style /> below the css <link /> in the head of page.html.php
or adjust themes/wind/css/screen.css which will be automatically combined w/ other css files as needed.

I adjusted the wind theme to my liking with the first method here.

And now visually embedding is possible as well.

-s

chess69

Joined: 2012-05-19
Posts: 16

Posted: Sat, 2012-05-19 15:43

first part, overiding the styles - i cant figure out how thats done. I dont know what im looking at in the PHP file

As for the screen.css, ive been slowly tweaking it but i cant control it, for instance, linking a logo in the banner section, or playing around with the outside borders of the center box that everything is laid out in, if you get me?

I found the background in the css now i want to give the center box/panel rounded corners and colored borders to follow the look of my website a bit more.

Is this possible?
Or do i have to go into the index.php or the page.html.php file??

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sat, 2012-05-19 16:16

use firebug to see the page elements live and tweak them as needed.

Quote:

I dont know what im looking at in the PHP file

its a mix of html and php
You'd want to add your <style></style> just before the <body>
like I did on mine.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

chess69

Joined: 2012-05-19
Posts: 16

Posted: Sat, 2012-05-19 16:34

you're being very helpful and i just wanted to say thanks - however, i still have a few questions! sorry! :/

(whats killing me is that im sure im so close!!)

Anyway what i like about your gallery is that you have your logo and links back to your home site, when i tried this the links are linking back to the index.php even though i added the links page.html.php file. and i dont know how to set the logo on the banner, other then putting it in as a background image in the css!

This is what im trying to figure out - did you build you page from the ground up or did you modify an existing theme already?

Ive been using firebug and i think the div 'DOC4' is the div that is controlling the look of the entire center block (i think!)

Again, thanks for you help

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sat, 2012-05-19 17:14

setting your own logo could not be easier.
views/page.html.php look for:

          <a id="g-logo" class="g-left" href="<?= item::root()->url() ?>" title="<?= t("go back to the Gallery home")->for_html_attr() ?>">
            <img width="118" height="45" alt="<?= t("Gallery logo: Your photos on your web site")->for_html_attr() ?>" src="/themes/wind/images/suprlogo.png" />
          </a>

and adjust as necessary
hint: if you are going to remove some php, remove from <? to ?> ie. <?= item::root()->url() ?>

I did adjust the wind theme to my liking. You can view the <style> I added by viewing the source of my page.

I used javascript to add my home link to the menu and alter the text of the original Home link:

          <script>
            $(document).ready(function() {
              $("#g-site-menu>ul").prepend('<li><a href="/">Main Site</a></li>');
              $("a.g-menu-link:contains('Home')").text('Gallery Home');
            });
          </script>

-s

chess69

Joined: 2012-05-19
Posts: 16

Posted: Sat, 2012-05-19 17:42

ok, i think im catching up here a bit. but im still a little muddy

how did you set up the page FYW-Demo, i mean when i set up the gallery3 and created the login etc, it automatically set up the index page for me. you seem to have complete control - and i dont just mean with the css in the page itself - but with the way its linked to the php necessary to get everything working?!?

I know im probably asking dumb ass questions here so if you know of a guide or somewhere online where i can get more info, id appreciate it. ive looked around the site and forums for modifying gallery3 wind theme and nothing comes close to the level of modifications i want to apply.

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sat, 2012-05-19 17:56

Theme Docs, Theme Tutorials, Available Themes

If you cannot find a module that can do what you want, then you'll have to get your hands dirty and learn some PHP or Javascript.

Or pay someone to get the functionality you want.

Or keep asking questions here in the forums... but make sure to create new topics when you switch subject.

I believe I gave instructions/code snippets somewhere in these forums on how I setup my gallery3's main page.

I mostly develop for G2.

-s

chess69

Joined: 2012-05-19
Posts: 16

Posted: Sat, 2012-05-19 18:06

you're a star!

many thanks for that and your help
ill keep chipping away at this and do a search for your stuff here.

chess69 Joined: 2012-05-19 Posts: 16	Posted: Sat, 2012-05-19 13:52
	first up, apologies if this topic has been covered or is somewhere else on these forums (for the life of me i can not find it!) but as the title says i want to customize the default (WIND) theme. It does everything i need, its simple, straight forward and easy to use but i just want to add my own colors and graphics. However i just cant find what CSS file controls what on the screen. Ive tried using FIREBUG but to no avail, in the inspector it shows that there is no link in the HEAD for the css path or even name! Any help or suggestions would be greatly appreciated!
	XUser login Username: * Password: * Create new account Request new password
suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sat, 2012-05-19 15:25
	You can always add your own override <style /> below the css <link /> in the head of page.html.php or adjust themes/wind/css/screen.css which will be automatically combined w/ other css files as needed. I adjusted the wind theme to my liking with the first method here. And now visually embedding is possible as well. -s

chess69 Joined: 2012-05-19 Posts: 16	Posted: Sat, 2012-05-19 15:43
	first part, overiding the styles - i cant figure out how thats done. I dont know what im looking at in the PHP file As for the screen.css, ive been slowly tweaking it but i cant control it, for instance, linking a logo in the banner section, or playing around with the outside borders of the center box that everything is laid out in, if you get me? I found the background in the css now i want to give the center box/panel rounded corners and colored borders to follow the look of my website a bit more. Is this possible? Or do i have to go into the index.php or the page.html.php file??

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sat, 2012-05-19 16:16
	use firebug to see the page elements live and tweak them as needed. Quote: I dont know what im looking at in the PHP file its a mix of html and php You'd want to add your <style></style> just before the <body> like I did on mine. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

chess69 Joined: 2012-05-19 Posts: 16	Posted: Sat, 2012-05-19 16:34
	you're being very helpful and i just wanted to say thanks - however, i still have a few questions! sorry! :/ (whats killing me is that im sure im so close!!) Anyway what i like about your gallery is that you have your logo and links back to your home site, when i tried this the links are linking back to the index.php even though i added the links page.html.php file. and i dont know how to set the logo on the banner, other then putting it in as a background image in the css! This is what im trying to figure out - did you build you page from the ground up or did you modify an existing theme already? Ive been using firebug and i think the div 'DOC4' is the div that is controlling the look of the entire center block (i think!) Again, thanks for you help

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sat, 2012-05-19 17:14
	setting your own logo could not be easier. views/page.html.php look for: <a id="g-logo" class="g-left" href="<?= item::root()->url() ?>" title="<?= t("go back to the Gallery home")->for_html_attr() ?>"> <img width="118" height="45" alt="<?= t("Gallery logo: Your photos on your web site")->for_html_attr() ?>" src="/themes/wind/images/suprlogo.png" /> </a> and adjust as necessary hint: if you are going to remove some php, remove from <? to ?> ie. <?= item::root()->url() ?> I did adjust the wind theme to my liking. You can view the <style> I added by viewing the source of my page. I used javascript to add my home link to the menu and alter the text of the original Home link: <script> $(document).ready(function() { $("#g-site-menu>ul").prepend('<li><a href="/">Main Site</a></li>'); $("a.g-menu-link:contains('Home')").text('Gallery Home'); }); </script> -s

chess69 Joined: 2012-05-19 Posts: 16	Posted: Sat, 2012-05-19 17:42
	ok, i think im catching up here a bit. but im still a little muddy how did you set up the page FYW-Demo, i mean when i set up the gallery3 and created the login etc, it automatically set up the index page for me. you seem to have complete control - and i dont just mean with the css in the page itself - but with the way its linked to the php necessary to get everything working?!? I know im probably asking dumb ass questions here so if you know of a guide or somewhere online where i can get more info, id appreciate it. ive looked around the site and forums for modifying gallery3 wind theme and nothing comes close to the level of modifications i want to apply.

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sat, 2012-05-19 17:56
	Theme Docs, Theme Tutorials, Available Themes If you cannot find a module that can do what you want, then you'll have to get your hands dirty and learn some PHP or Javascript. Or pay someone to get the functionality you want. Or keep asking questions here in the forums... but make sure to create new topics when you switch subject. I believe I gave instructions/code snippets somewhere in these forums on how I setup my gallery3's main page. I mostly develop for G2. -s

chess69 Joined: 2012-05-19 Posts: 16	Posted: Sat, 2012-05-19 18:06
	you're a star! many thanks for that and your help ill keep chipping away at this and do a search for your stuff here.

Customizing the CSS

XUser login