layout ☆ Tomorrow's Dream
Wednesday, March 28th, 2012 09:40 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
maqui posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
bodhum
After some procrastination, I have finally gotten around to reworking the CSS for this layout; I named it Tomorrow's Dream as a reference to Hope Estheim's theme in Final Fantasy XIII-2 and, as such, the accent color is orange (yes, yes, I know they nixed the orange for him in XIII-2, but orange is a much more friendly color to work with than yellow when you're working with light backgrounds for text). As with Junk Dealer, I organized the CSS for this layout so it is easier for you to modify the colors and text as you see fit, though, so if you want some color other than orange, you'll be able to switch to it easily.
As always, CSS and special mentions can be found beneath the cut.
And that's that; enjoy!
Side Note . By the way, the CSS for Junk Dealer has been updated to fix an issue on entries and comments with no userpic.
As always, CSS and special mentions can be found beneath the cut.
☆ Includes custom entry pages.
☆ All font customization is found under in the Text section of the CSS, all color customization is found under the Colors section of the CSS, and the two image areas (for the two lines on the page background and for the header) are found in the Images section. This is all set up so you can easily place your own header image; just place the URL of the image between the single quotes in the "#header #journaltitles-container" definition at the bottom.
☆ Fonts used are Verdana and Georgia; to change either one, you'll only have to change the font family name in the Text section.
☆ The two orange accent colors are #e98f0d (text) and #f1af50 (elements). Each value only appears once, so just replace that with the color you want if you'd like to change it. For example, for my own personal use, I changed those colors with the reds I used for Junk Dealer.
☆ The base code does not have a header image; the preview just shows an example of one. For your reference, the white header area that will use a background image is 900 x 200 pixels.
☆ To set this up, select any Basic Boxes theme and then change the page layout to 1 Column (modules at top and bottom; no sidebar) Then, under Customize your theme, navigate to Custom CSS, uncheck the "Use layout's stylesheet(s)," and paste the CSS into the box; save your changes and then go to the Modules section. You should set your modules up to look something like this (you can use whatever tags display you would like); this will ensure the modules display properly. Please make sure to note the numbers for some of these sections! In particular, the tags module should be numbered so that it will be the first module for the secondary module section; this ensures that it will display properly. Also note that the module section at the bottom is confined to a certain height; modules that tend to take up the majority of that height (tags, calendar, page summary, recent active entries) should, thus, be used sparingly. I personally like to choose only two (tags and calendar) and then use some of the smaller modules so they fill in the center.
And that's that; enjoy!
Side Note . By the way, the CSS for Junk Dealer has been updated to fix an issue on entries and comments with no userpic.