As i said, im completely into CSS, as i like designing, and im learning quickly. But still, im no expert and im running into all sort of problems.

Here is the picture, so you can see, what problems do i have.

Direct link:

http://i55.tinypic.com/2w1tlb7.png

1.I tried with padding/margin to set space between footer and content, but with no success. I would like to have 5 px space between footer and content/sidebar. Footer is 100% wide, no height specified. Also note that content div+sidebar(isnt pictured) are both floated, if that has to do with anything.

2. About True WYSIWYG. I followed "docs" tutorials, did everything ok, but when i tried to edit let's say content, it narrowed text almost half the width, as it is in the picture. Without it it's okay. Here, im also lost.

For start its ok. I will use this topic for my headaches/questions, hope its okay.

Thanks

Boris, there's no way anyone can help you with this question without the theme itself. We have no way of knowing what is going on. The best guess anyone could give is, add #footer{margin-top:5px}; or bottom margin to the content/sidebar wrapper div -- that’s assuming the footer is in id=”footer” and everything else is OK, but it sounds like you’ve already done that.

The other thing to bear in mind when asking questions for help building a theme is, you’re asking for someone to help build you a custom theme--some may not be so eager to jump in on that topic. You know, since they do it professionally. So don't get discouraged if you aren't getting help asap. I know that’s not your intent--you are just learning.

I probaly won't have time today to really dig into a theme’s CSS, maybe next week. . .

The thing I suggest doing when starting with a theme in gpEasy for the first time and you aren’t a pro, start with a theme that already works and hack it to learn what is what--I’m not all that good at any of this but that was the biggest benefit though it took some time. There are some rather basic themes that you can just add more divs and customize them to get a feel for what you need to do or even make into exactly what you want. This is especially true for the true WYSIWYG feature. It’s a bit of a pain. You can look at my B2sq theme (& Josh's)--it isn’t even perfect for that, just isn’t possible with the style. Nonetheless, there’s a lot going on for that. I’ll try getting a tutorial up for that but it won’t be for several days at the earliest. Nonetheless, you might get an idea of what I had to do by looking at my theme and dissecting it as it was designed for gpEasy 2.2 and it isn't all white backgroung--has lots of background and things going on that needed to be compensated for.

Anyways. . . The best answer I have for the pixel problem is, you should have a div wrapping the content & sidepanel and that div ought to have the extra margin at the bottom in order too push the footer wrapper down away from it.

For true WYSIWYG editing. The element defined in the settings.php needs to have the proper width specified to it in the css, not to mention background, color, etc. as do the parent divs. Take a look at my them and the elements defined in the settings.php file and their css--sorry, the css in that theme is still a bit of a mess. . 

hope that helps

Thanks Charles, ill download your theme and play with it. So for true WYSIWYG i would need to create a settings.php for my theme to work correctly, i assume. As for pixels, ill try something, if fails then ill paste the code here.

About theme, i'm learning and i know, that most people wouldn't want to help me build my custom theme. You know, i could of rip CSS of other sites, but i don't really want that, i like to build from scratch and so far, i really enjoy. Practice makes perfect. Positioning of divs, that's most difficult part for me right now.

take a looka at a list apart for great tutorials

Hi Boris, I have created one basic template, that can help you understand, which floats and margin is where or when necessary. I suppose it's quite easy to understand, there are only essential stylings. Maybe it also looks similar to cPaper. The gpx_content should be probably everytime inside floated 100%width div, because after each section follows gpEasy inserts cleaning div, and it all should be placed inside another relatively positioned div. Though I am not sure what layout structure you want to create in final, there are many possibilities.

http://hotfile.com/dl/125447802/6061ce5/BasicTheme.zip.html

P.S.: when I created my theme, I used Firefox and there is one superb plugin Aardvark  (you just click on its icon and as you move cursor around the screen, you see the margin of all div, as they are rendered  in browser, and also its names, and when you press the V key, it will show you the source code of that div- it helps like a private detective to find out, what caused improper page alignment). Similar plugin is Web developer (imao needlessly complex), and maybe also any others... And also a few tips: divs are by default positioned relative. But sometimes it is needed to specify its relativesness explicitly when using nested divs. If you have floated div made absolutely positioned, it is like you have extracted it out of the document flow. Justlike it is said here: http://www.barelyfitz.com/screencast/html-training/css/positioning/  in 3rd example description of absolute divs. Good luck to you, Stano.

Wow, thanks for the great reply, both of you and i will check solutions from both.

Stano, i thought default position was static ?

 

e: Just checking the site Stano...this is fabolous!!! Thank you!

Each section attached to a page is static, but as you can see in /include/common.php in function SectionsToContent (currently on line 513), after each static section is inserted empty floating clearing division, which in most cases stretches the page content and if you don't want to see long empty space between sections, you should put the function call $page->GetContent(); inside another floating div, that is for example <div style="float:left; width:100%;"><?php $page->GetContent(); ?></div>. (I hope I don't chat now nonsenses, this is only my recent empirical discovery, I have found out :-)))

Thanks for this, i actually learned alot and i understand positions better. I had a problem, when footer didn't want to clear my sidebar, fixed. Position was absolute, instead i floated it to left, same for content. and clear property works, as do margin, for what i was asking. Too bad, that clear property doesnt work for absolute elements.

 

As for submitting a theme here, are there any rules? I have a button for Login, which i have placed in top right inside header div and i disabled sitemap link. Is this required for me to submit a theme here? Too bad, that they aren't separated.

Hello Boris, I suppose that you're not obliged to have the Sitemap link shown. If you look at Lumoit theme's .css style, there is also .sitemap_link {display:none;} used. And although it is certainly better to use standard gpOutput::GetAdminLink(); function (it appends entry page to your url), you can also use some alternative php construction, just like this one:

<?php global $langmessage;

    if (common::LoggedIn())

        echo '<a href="'.common::GetUrl('Admin').'?cmd=logout">'.$langmessage['logout'].'</a>';

    else

        echo '<a href="'.common::GetUrl('Admin').'">'.$langmessage['login'].'</a>';

?>

Have a good luck! :)

Thank you Stano, as always, you are great help and much appreciated.

My theme is let's say, 90% done. I will explain, how is it build etc., but first look at the picture. I accept criticism, also note, that i am totally new to CSS and im learning. Also, this theme is complete from scratch, except main menu, there i needed help, that part is really tough, because it's a dropdown menu.

Direct link to picture is here:  http://i53.tinypic.com/142ehzn.jpg

About the theme. Theme is centered and wide 60% except footer, which is 100%. Every aspect has automatic height, except header and menu. Sidebar is 19% wide and positioned 1% to the right side, so it fits with content. On the opposite side of sidebar, there is 20% free, but i also added fixed layout  there, but is hidden currently, as i have no idea yet, how to design it and it intends to be optional choice. Background, sidebar and footer all has own background images, like does main menu on hover(and underlined text on hover). Footer links and extra footer are centered and 43% wide, left and right footers are both 27%, so it fits kinda nicely. I added more divs to footer as optional choice, i like lets say having SimpleBlog on left footer etc... That's it propably, my screen recorder made picture a little bit blurry, theme is much better in live. I used some CSS3 properties in theme, so theme propably wouldn't work properly on older browsers(targeting especially IE). Login button is on top right side of the header, sitemap link is disabled and set to transparent. That's it, but it still isn't finished. I don't exactly like border for sidebar, and i need to add some for footer...

Hi, I mean, that layout colors seems ok. I haven't seen a website, where are used the percentual proportions for the divs, did you? I would suggest you to make the sidebar fixed, imao every layout looks better, if it contains some tough element. Or at least, don't forget to use min-width~about750px for the main container. The login button should be placed at some insignificant place, because it is insignificant :) Yeah, that theme look good, just you should be very very spare with that percentages :-)

Thanks for reply.

You have any advice, where would be better fit for login button? Fixed sidebar isn't a bad idea really.

About min-width to page container, why? I will give you link tomorrow, i will add same test content on the site and you could test it out and see the code.

 

Boris

 

E: you can go here: testing996.tk  ..note, that "LoLa" link doesnt work, cuz i screwed it up. ;)

I am not a webeloper, only think that the solid layouts looks better, and the login link is not important for visitors, that's why it's been mostly positioned at the bottom of screen. But Boris, if you like it at the top of screen, let it be there. It's not bad at all. Have a good time.

Hi. I created a new addon, want to submit it here, but after i entered the details, it wont let me to upload screenshot and release, there must be something wrong, or am i missing something?

E: I click Add Screenshot/Release and it does nothing, just reloads the page..

E2: ok, got it. My browser setting were wrong..

E3: Theme is uploaded, but why it doesn't appear on top under "newest" ? It appears only, if u click "View all sorted by newest" at the bottom.

E4: Nevermind, everything is okay now.

Hmm, in my oppinion, your theme looks really cool, Boris! Only one thing-  I think it would be better to stretch the header and footer to full width. Other than that, it's nice work, Boris! :-)

Thanks, didn't even notice, i had wrong name, i renamed it and uploaded an update. As for header width, you mean 100% instead of 960px or you mean more pixels? Because header would look weird, if someone would have 1600x1200 resolution and other elements of page are all 960px.

Ok I see. You have div#header {width:960px;}, which contains the 2 divs:
headersocialnetwork {float:right; width:180px;}
headertext {width: 350px;}
You could resize headertext's width to 780px
and footer's width also to full 960px. No advantage when restrict it to be such small.
And yet add to body tag where is background-color:black ,also color:white;
And also maybe you could flip and move the contentweb.gif top right top.
I am not sure, if you like it as it is, then let it be. Maybe I'm wrong and it's good as it is now:)
Must tell you, it's nice template :-)  Stano

 

Thank you. 1.div#headtertext is "extra header" call, intended for domain name and description. I could resize it to 600-650 px, on the right site iz "social network" div, which is 180px wide, but i need to calculate right margin too, its not totally floated right. I thought at first that you suggested to resize the "header" div, but that would really look weird on higher resolutions. I had a LOT of dilemma about width, when i started to make that theme. You warned me about % in previous test theme and i tested it in different resolutions= NO GO. Fixed width is the best for me, 960px. Why 960? I searched a lot and saw a lot of big sites and they have the same width, and based on statistics, 640x480 resolution users don't exist anymore. 800x600 is 1% or less, others are 1024x768 and higher. On those data and searches i made my decision. 2. Footer is 960px wide, its just divided in 3 areas. The main middle area is the widest, left and right footer are smaller. Those 2 areas should be optional, now to have only 1 area, user should just remove leftfooter and rightfooter #div and change main footer width to 960px. Anyway, in my opinion, i think footer width is wide enough. At the end, there is really not much information, you could of put into footer, right. My idea basically was for me to have "simple blog" in left footer, like Josh have it here, on the right side i wanted to put some additional info, maybe picture "best viewed with" like sir Charles has, something like that, just an ideas. 3. Will add white color, no problem. 4. I could, but i think its better looking at the left side, because this is the site, where sentences starts(that's, why i put it there :) ). Anyway, thanks for the feedback. I understand, that everyone will not like it, because everyone has its own style. But for the start, i think its good and with practice and learning, i can make even better themes. Month or so, maybe less, i knew absolutely nothing about css, and i decided to learn, saying myself: "it cant be that hard" and it isnt actually, but for the most part, you need to know english good. I was tired of picking other's people work, because i never found a theme, that would 100% suit me, that's why i started with it and i love it, really. No java or other languages, css is for me. :) Have a nice day, Stano. E: totally offtopic, but is anywhere here on forum an option for me to set a right time zone, because its not right for me?

Yes that's it, 1024*768 is the mosf frequent. O.k. Boris, make your layout as you like it, it will be fine. Just define the colors to be good readable. (that is #headertext color and #content color) . And no there's no option for redefininig time zone, not much useful, people live and come here from all over the world. We can simply subtract about 6 hours to localize it to CET. This web is probably located somewhere in utc -5. Well, have a nice day Boris.