Flex
Adding Custom CSS
January 8th, 2007 @ 09:07 pm
CSS is a pretty powerful tool to customize journal layouts. If not stated differently by the user, LJ includes a default stylesheet, which already styles the whole journal. There are many ways to adjust it:

All Accounts (Free, Plus, Paid):

  1. using the color pickers in the Customizations Wizard under the Colors tab, selecting fonts under the Font tab, setting a background image under the Images tab, and widths under the Presentation and Sidebar tabs.

    This is your preferred way if you are mostly happy with an already existing theme (e.g. Autumn or Eclipse), and just want to make minor adjustments to certain areas.
    For any changes in the color pickers to take effect in your journal, you have to make sure that you set » Use layout's stylesheet(s) to Yes (in the Customizations Wizard under the Custom CSS tab)

  2. the Custom Stylesheet textfield in the Customizations Wizard under the Custom CSS tab

    This is the recommended way for any small changes to the CSS that the color pickers would not allow (for example, adding a banner), and for premade free layouts.
    If you only want to change a few details of an already existing theme, make sure that you set » Use layout's stylesheet(s) to Yes (in the Customizations Wizard under the Custom CSS tab).
    If you have a premade free layout from one of the layout communities, this is the place to put it. Make sure, though, that you set » Use layout's stylesheet(s) to No (in the Customizations Wizard under the Custom CSS tab), in order to avoid any confusion if the default and your added CSS contradict each other. It might have some unpredictable and hard-to-explain effects on the journal's display.

    When you add CSS this way to override the layout default stylesheet, selecting any background images, colors, fonts and widths in the Customization Wizard might not take effect any longer.

  3. or by setting up an external stylesheet in the Customizations Wizard under the Custom CSS tab.

    You can use the external stylesheet pretty much like the Custom Stylesheet textfield (for small changes or whole premade layouts):
    If you only want to change a few details of an already existing theme, make sure that you set » Use layout's stylesheet(s) and » Use layout's stylesheet(s) when including custom external stylesheet to Yes (in the Customizations Wizard under the Custom CSS tab).
    If you have a premade free layout from one of the layout communities, this is the place to put it. Make sure, though, that you set » Use layout's stylesheet(s) and » Use layout's stylesheet(s) when including custom external stylesheet to No (in the Customizations Wizard under the Custom CSS tab), in order to avoid any confusion if the default and your added CSS contradict each other. It might have some unpredictable and hard-to-explain effects on the journal's display.

    In both cases, you need to set » Use external stylesheets to Yes.
    The CSS file (a normal text file with the file extension .css instead of .txt, with all the CSS coding in it) needs to be uploaded to a reliable webhost. Then, the link to this uploaded CSS file has to be put into the » Custom external stylesheet URL text field.

    When you add CSS this way to override the layout default stylesheet, selecting any background images, colors, fonts and widths in the Customization Wizard might not take effect any longer.

  4. Custom Stylesheet textfield vs. external stylesheet

    The textfield is a relatively new LJ feature, therefore most tutorials only talk about the external stylesheet when explaining ways to include custom CSS. You can also use both the Custom Stylesheet textfield and an external stylesheet at the same time, e.g. use the external stylesheet for a premade layout, and the textfield for small individual adjustments to that premade layout (or vice versa).

    The main differences between the textfield and the external stylesheet are:

    • The external stylesheet needs to be hosted on a reliable webhost, one that has little to no downtime, allows hotlinking, and offers enough traffic (otherwise the CSS becomes unavailable due to exceeded bandwidths).
    • The external stylesheet will be linked on the journal, whereas the textfield CSS is printed directly on the journal's source code; i.e. if the CSS codes in textfield and external file contradict each other, the textfield CSS will overrule the coding in the external file.
    • Linking stylesheets rather than printing them out in the journal page's source code reduces the file size per page, which is recommendable for dial-up users.
    • Because of the hosting and linking of the external stylesheet, browsers, proxy servers and even LJ itself might cache older versions of the external CSS, and changes might not immediately take effect.
    • Also, if your internet connection is slow, LJ has server problems, or your webhost is down, a linked stylesheet might be loaded incompletely, which in turn might result in incorrectly displayed layouts.

    Frankly, I recommend using the textfield rather than the hosted external stylesheet.


Paid Accounts only:

  1. manual use of properties:
    This is the same coding which the Customization Wizard uses to store the CSS data. If you don't use a user layer/the Customization Wizard, you can add this coding to your theme layer.

    the Custom Stylesheet textfield:
    set custom_css = """ YOUR CSS HERE """;
    the External Stylesheet:
    set external_stylesheet = true;                       # Use external stylesheet?
    set external_stylesheet_url = "STYLESHEET URL";       # URL to external stylesheet
    Layout Default stylesheets. Set both to false if the custom_css property or the external stylesheet are a premade layout.
    set include_default_stylesheet = true;                # Use layout default?
    set include_default_stylesheet_with_linked = true;    # Use layout default when an external stylesheet is used?

  2. print_stylesheet()

    This is the function that prints out the LJ-provided stylesheet which can be found at http://exampleusername.livejournal.com/res/xxxxxxx/stylesheet?xxxxxxxxxx; i.e. with this coding, you are replacing the layout default stylesheet. Hence you will need to include a complete premade layout this way, or parts of your journal would remain unstyled.

    It also means that selecting any background images, colors, fonts and widths in the Customization Wizard will not take effect, unless you code the CSS to use the respective properties (as the original Flexible Squares function does).

    Of course, since we're dealing with a function here, you can also use variables and if/else-statements to make your life easier (e.g. to print certain parts of CSS only in certain page views).

    Make sure you set » Use layout's stylesheet(s) to Yes (in the Customizations Wizard under the Custom CSS tab, or by putting set include_default_stylesheet = true; in your theme layer), otherwise this function will never be called by LJ, and the CSS won't be applied to the journal.
    function print_stylesheet()
    {
       """
       /*your stylesheet code goes here*/
       """;
    }
  3. Page::print_custom_head()

    This function allows you to print custom text within the <head></head> tags. It is not limited to CSS, though that is the usual application. It does not replace the default layout stylesheet, as long as » Use layout's stylesheet(s) is set to Yes (in the Customizations Wizard under the Custom CSS tab, or by putting set include_default_stylesheet = true; in your theme layer). Therefore, it is the recommended function if you want to add in only small changes to the CSS.

    It also means that selecting any background images, colors, fonts and widths in the Customization Wizard will not take effect, unless you code the CSS to use the respective properties (as the original Flexible Squares function does).

    Of course, since we're dealing with a function here, you can also use variables and if/else-statements to make your life easier (e.g. to print certain parts of CSS only in certain page views).
    function Page::print_custom_head()
    {
       """
       <style type="text/css">
       /*your additional css here*/
       </style>
       """;
    }
    This function also allows for another way to include page view-specific CSS. If one wanted to print CSS only if an individual entry is viewed, one could use the function EntryPage::print_custom_head() instead. Any views that have no such function of their own fall back to the default Page::print_custom_head(), views that do have their own function ignore the default one and only print what is stated within their own function.

  4. print_custom_stylesheet()

    This function is no longer in use. Please include your CSS in any other way.




there are hundreds of CSS tutorials online explaining how CSS works, and irinafan made an extensive guide to show what classes are available in Flexible Squares. therefore, they are not explained any further in this tutorial.



Additional notes/FAQ for the curious and nerdy:

  1. Make sure to check the stylesheet for stray or missing brackets. Can be done by feeding it to the W3C CSS validator.

  2. Make sure the external css document is of the proper document type (.css) and does not have any strange characters in it. Also make sure it's just css, and does not have HTML.

  3. LJ's CSSproxy/CSScleaner scans linked stylesheets for illegal characters and anything that looks like a malicious script, which may result in changes made to external stylesheets. Have a look at the CSScleaner's output if you feel like your external stylesheet does not get applied to your journal properly. You can find it at http://cssproxy.livejournal.com/?u=stylesheeturl (where stylesheeturl is the URL of your external stylesheet).

  4. Page::print_custom_head() results in the CSS being printed twice, above and below the default layout stylesheet. That is a small issue of Flexible Squares.

  5. If you use both Page::print_custom_head() and print_stylesheet() to style your journal, bear in mind that due to the order in which LJ prints the different stylesheets, Page::print_custom_head() will override any contradictory statements in print_stylesheet().

  6. You can have both Page::print_custom_head() and print_stylesheet() only once in your theme layer. That's a general rule, by the way: Never have the same function defined twice in your theme layer. (You can easily check that in the left frame of the Edit Layer page. There shouldn't be more than one link to the same function.)

  7. If you set » Use external stylesheets and » Use layout's stylesheet(s) to Yes, yet don't provide an URL to an external stylesheet, the layout default stylesheet will be linked in the source code. If » Use external stylesheets is set to No, the layout default stylesheet is printed directly into the page's source code.

  8. The resulting order of included CSS is:
    1. Page::print_custom_head() CSS (printed)
    2. The layout default stylesheet or print_stylesheet() CSS (linked, only in case of an external stylesheet, whether or not there is an URL to said external stylesheet)
    3. The external stylesheet (linked, if an URL is provided)
    4. The layout default stylesheet or print_stylesheet() CSS (printed, if there is no external stylesheet)
    5. The Custom CSS textfield (printed)
    6. Page::print_custom_head() CSS (printed)

  9. Whenever you include and do not replace the layout default stylesheet, removing a line of CSS coding from your custom CSS might not have the desired effect. Check the layout default stylesheet for any statements that contradict what you want to achieve, and add the appropriate overrides in your custom CSS.

  10. Variables and page view-specific CSS are only available within functions, hence only for Paid Accounts.
 
( Post a new comment )
 
ephi: cssivles on January 9th, 2007 06:30 am (UTC)
Because of the hosting and linking of the external stylesheet, browsers, proxy servers and even LJ itself might cache older versions of the external CSS, and changes might not immediately take effect.

I don't think LJ cached any external CSS, they just "cleaned" it via a server called cssproxy.livejournal.com to make sure nothing other than CSS is put inside the file.

Frankly, I recommend using the textfield rather than the hosted external stylesheet.

For those who had friends on dial-ups, it'll be much more recommended if they use hosted external stylesheet, to reduce filesize per page.

Thanks for the post!
 
Veronika: [geek] unix sexkentucka on January 9th, 2007 01:40 pm (UTC)
I don't think LJ cached any external CSS

hm. my experience with linked external CSS was that changes didn't take effect immediately, so to some extent there must be caching involved. since I cleared my browser's cache back then, it must've been LJ. it seems logical to me: that would reduce the server load for the cssproxy, and it would also bridge any momentary unavailabilities from webhosts. I'm not talking about long spans of time though, maybe a couple of hours.

if you're viewing LJ through a proxy (e.g. as I did at university), that one might still cache stylesheets. and of course, browsers might do it, too. the tutorial does not saying they do, it says they might, as in, it is a possible explanation why recent changes in your external CSS are not displayed. :)

reduce filesize per page.

yes, although the overall amount of data to be transferred increases through linking. I'll include that in the tutorial, since it's a valid point, but it doesn't change my recommendation because in my opinion the cons still outweigh the pros. especially for LJ/internet newbies, the textfield is so much easier to handle, it has fewer possible sources of error, and it does not require the user to get any accounts with third parties.
 
 
frappuccinolove on December 5th, 2007 12:01 am (UTC)
First of all, it's nice to see someone so ambitious in helping others understand things better. Though it did not work for me this time, I hope that one day I'll get it. I use CSS and love it, but none of this made sense to me.

What I want to ask is (keep in mind, I own a paid account for a couple of days now, so I'm really new to theme layers) how can I use metadata with css, if it's possible?

I know that elitists and html/css brainiacs will start rolling their eyes now, wondering how people always have to ask the stupidest questions possible when there are perfectly organized posts all over these communities. I asked several people already, but got no response.

What do I have to do to have it on my paid account journal, and is it possible to set it up there?

If not, does that really mean I have to build the whole theme myself, all the layers? Cause that's a lot of things to go through and I can't possibly learn all of that before Christmas, when i want my journal all set.

I have heard people talking about adding things into a theme and mixing it all together. Is that correct?

I apologize for being so clueless, but I'd really appreciate it if somebody could push me in the right direction. Is there a way I could add metadata to a theme and not putting/building anything else there, just relying on my css, or do I have to go through all the existing details so that they match with my css?

Thank you all in advance and I hope I'll hear from you soon.
 
Veronika: [geek] lj codingkentucka on December 10th, 2007 02:52 pm (UTC)
You have a weird way of asking for help, because at the same time you called anybody who's well-versed in html/css/layer coding an "elitist" like they think they're superior, and implied that they're all secretly laughing at you for asking questions because you're new. This might not be the way you meant it to sound, I'm just telling you this is what came across and I'm lightly offended by it. We all have better sources of entertainment, I think, and if we wouldn't want to answer questions we wouldn't be here.
hey, give it a few months and you might stand on the other side, helping newbies with what you've learned.

back to your original problem, though.
as I understand it, you've got a journal with the CSS all ready, you just want to add in certain paid account stuff, for example the metadata tutorial.

all account levels work the same way. whether you're a basic or a paid account, in the background you always have layers and styles. with a basic account, you don't have access to them directly. Your only way to edit the journal layout is the Customization Wizard, and the CSS that you can add in.

With a paid account, you get that access. You can now not only change the appearance (backgrounds, margins, font sizes, etc) of the stuff that's shown in the journal, but you can also change WHAT is displayed. You can still use the Customization Wizard, and all your CSS, if you follow this tutorial which explains how to add a theme layer for 'paid only' stuff to journals while keeping the existing layout.

after creating a theme layer and a style that keeps your CSS (see link above), you only need to follow the tutorials for whatever you want to change. no further adjustment should be necessary, definitely not a re-coding of the whole Flexible Squares.
 
frappuccinolove on December 10th, 2007 10:51 pm (UTC)
;)
Hehe, no. It wasn't meant to be offensive. English is not my first language, so I can get very cold and mechanic if I try to put some of your expressions into my sentences.

I'm bad with these things, but it's getting better. There are a few things that i have to fix and I'll be set. Thanks for taking your time. Oh, and I don't think that it could be that simple with functions in theme layers. If I add a new thing, the others get really messy. It's difficult most of the time, because you can't really find a way to ask what it is that you want to achieve, let alone start looking for answers.

Thanks for your time and effort, you're quite popular here, basically, I've been using your tutorials page from your lj for everything.

Take care
 
Veronika: [geek] lj codingkentucka on December 10th, 2007 11:38 pm (UTC)
English is not my first language
not mine, either. I see you're from Croatia? well hello fellow continental-European.

if you want something that hasn't been asked before, or at least that you can't find on the comm yet, pictures often help in explaining, just something photoshopped so others can see what it should look like in the end.

the trick with adding new functions to the theme layer is to add them at the very very end, after the last closing curly brace and a couple of newlines. that way you can avoid compiler errors.
another this is, always save theme layers in text files as a backup on your computer. if something goes wrong, you can always go back to that.
and never add the same function or set statement in twice. it causes unpredictable behavior. if you notice that you already have that function in your layer, contact whoever wrote the tutorial and ask them to help merge code.

other than that, please always feel free to ask questions, either in comments or by making a new post. it'd even be ok for me if you asked for a crash-course in coding syntax, just enough so that you can follow tutorials more easily.

huh. I didn't know people used my personal LJ to look for tutorials. just the tutorial tag or the index site as well?
 
frappuccinolove on December 11th, 2007 01:52 pm (UTC)
Hmmm, i think it's a page that you compiled all your tutorials at. It goes from what is css to bottom sidebars to all kinds of stuff. I followed that to have my metadata on the top and similar stuff.

I often get those errors, though they vary in "themes". I can't remember what each of them was, but it's usually stuff like tokens (does that make sense?) not being right.

That it tells me what it expected and what it got and shows me the line and column with the mistake. I did not know that it may be a compiling error. I'll try adding empty lines before starting a new function and make sure that they are beneath " } ".

But you know what's the biggest problem for me? The fact that all these different things you want to do with only ONE element can override each other. You were right about saving it into a text document as a backup. Like, right now, I managed to "make" a function that makes my entry links look as pictures (for edit/tag/mem), but if I can't go looking for a tutorial that will help me get them on my Recent View in every entry. I'm afraid that even if I find something like that it will override the first function (showing links as pictures).

Well, thanks for replying so fast and take care
 
 
shadowdragon21shadowdragon21 on October 2nd, 2009 01:35 am (UTC)
Hmmmm...well I have a layout that I am using that is done in css, however, I don't know how to script in the images that I am hosting to put in the layout. So far the whole layout works great but none of the pictures will work. Anyone able to help me out?
 
Veronika: [geek] lj codingkentucka on October 3rd, 2009 08:48 am (UTC)
did you figure that out by now? if not, which pictures would you like to see where?
 
 
heysaynewsheysaynews on September 5th, 2010 05:34 pm (UTC)
in need of SERIOUS help.
im a total newbie.

all i know is that theres this box on the custom CSS page on my LJ and all i have is a link to the picture i want as my banner from photobucket.

i don't have a paid account, so i have no other way to make my own banner.

can someone please explain a step-by-step basic way to put up this banner?

sorry for being so techonologically retarded,

help would be appreciated
 
Veronika: [geek] lj codingkentucka on September 5th, 2010 07:09 pm (UTC)
Re: in need of SERIOUS help.
please see this tutorial. it gives you the CSS you'll need to put into that custom CSS box.
 
heysaynewsheysaynews on September 5th, 2010 08:44 pm (UTC)
Re: in need of SERIOUS help.
hey, thanks for the link

but im having trouble with making an external stylesheet?

i dont have any program or software for that,

im sorry, do you have anything simpler? or like an example of what i could type to create my custom CSS?

all i want is a header :(
 
Veronika: [geek] lj codingkentucka on September 5th, 2010 11:06 pm (UTC)
Re: in need of SERIOUS help.
you don't need an actual external stylesheet. all you need to do is follow the instructions in the tutorial I liked under "Adding a Header Image Using an External Stylesheet", and then put that CSS into the "Custom CSS box" (point ii. above).

that box wasn't around when the header image tutorial was written, so back then one had to create an external stylesheet.
 
heysaynewsheysaynews on September 6th, 2010 06:23 am (UTC)
Re: in need of SERIOUS help.
oh right okay.

where it says "replace it with the following code, modifying the parts in red as you see fit by following the instructions in blue"

does that mean i don't include the blue in the code?
should it look like this:

.headerimage {
position: relative;
width: 708px;
height: 486px;
margin-left: auto
margin-right: auto;
margin-bottom: 20px;
background-image: url("http://s982.photobucket.com/albums/ae306/heysaynews/?action=view¤t=FINALLJBANNERMWAHHAHAHAH.jpg&newest=1");
background-repeat: no-repeat;
}
 
Veronika: [geek] lj codingkentucka on September 6th, 2010 12:15 pm (UTC)
Re: in need of SERIOUS help.
Actually, you can keep the blue parts in, they're comments and won't mess up your CSS.

But your code is fine except that in the margin-left line the semicolon is missing. And please doublecheck the URL to your banner, this one doesn't look quite right. I would have expected it to be http://i982.photobucket.com/albums/ae306/heysaynews/FINALLJBANNERMWAHHAHAHAH.jpg
 
heysaynewsheysaynews on September 6th, 2010 12:22 pm (UTC)
Re: in need of SERIOUS help.
Thanks,

I added the semi colon and put in the new link so it looks like this:

.headerimage {
position: relative;
width: 708px;
height: 486px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
background-image: url("http://i982.photobucket.com/albums/ae306/heysaynews/FINALLJBANNERMWAHHAHAHAH.jpg");
background-repeat: no-repeat;
}

but that didnt work either :/ any suggestions?
 
Veronika: [geek] lj codingkentucka on September 6th, 2010 05:01 pm (UTC)
Re: in need of SERIOUS help.
oh honey, you don't have a Flexible Squares layout. yours is called Expressive, that's why this code doesn't work. this community focuses only on Flexible Squares. s2expressive is our equivalent for the Expressive and Mixit layouts.

but try exchanging the first line .headerimage { with #header {, that should make the banner show up.
 
heysaynewsheysaynews on September 6th, 2010 05:06 pm (UTC)
Re: in need of SERIOUS help.
HEY
IT WORKED!!

wow. no really. i owe you my life &hearts.
you don't know how long i've been spending on this.

wow.
just.
wow.

/in shock.
 
Veronika: [geek] lj codingkentucka on September 6th, 2010 06:37 pm (UTC)
Re: in need of SERIOUS help.
you're welcome. I'm glad I could help.
 
 
oishiiumaishooishiiumaisho on September 7th, 2010 07:04 pm (UTC)
hello

I'm using the Japanese Style theme, and my code currently looks like this:

#header {
position: relative;
width: 800px;
height: 573px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
background-image: url("http://s982.photobucket.com/albums/ae306/heysaynews/?action=view¤t=hosonsbanner2.jpg");
background-repeat: no-repeat;
}

its not working though, do you have any ideas?
 
Snakelingsnakeling on September 7th, 2010 07:42 pm (UTC)
That would be because this code is for Flexible Squares, and you're using Cuteness Attack. I don't think there's a specific comm for this style, so you might want to have a look at s2styles instead.
 
Veronikakentucka on September 7th, 2010 07:44 pm (UTC)
I see you beat me to it :)

edit: would it be a good idea if we add a whole list of all the other style-help-comms in the community's profile? I don't even know them all...

Edited at 2010-09-07 07:46 pm (UTC)
 
Snakelingsnakeling on September 7th, 2010 09:04 pm (UTC)
Do people even read the community's profile before asking their questions? ;)

Though at least it would make a handy resource for us :D

s2styles : non-layout-specific comm
s2smoothsailing : Smooth Sailing
s2bloggish : Bloggish
s2expressive : Mixit and Expressive
s2minimalism : Minimalism
opal_help : Opal (Libra OSWD)
component_help : Component
s2tranquility2 : Tranquility II
boxer_help : The Boxer

This is what I got with a quick interest search for s2, though I'm sure there are others. I also haven't included those comms that haven't been used in ages.
 
Veronikakentucka on September 7th, 2010 09:29 pm (UTC)
that would be a definite NO for the majority of the OPs. Although certainly not all of them. :)

awesome! I've included those in the bio, right at the top.
 
Veronika: [geek] lj codingkentucka on September 7th, 2010 07:43 pm (UTC)
I don't know where you're using that particular code, but not on your current layout - which isn't even Flexible Squares. The CSS codes etc posted in this community often ONLY work for Flexible Squares based themes, hence the name s2flexisquares .

your current layout doesn't go well with high banners, but you can try placing it in #container, and adding a padding-top: 800px; as well, though you might have to adjust the number a little.

in any case, if you're trying to use a pic that's uploaded on photobucket, make sure that you use the "Direct Link" option from the "Share This Image" box. in your case that's http://i982.photobucket.com/albums/ae306/heysaynews/hosonsbanner2.jpg
 
oishiiumaishooishiiumaisho on September 7th, 2010 08:00 pm (UTC)
hey, thanks

i did what you said, a banner did appear
but now it looks like this:

http://oishiiumaisho.livejournal.com/

any suggestions?
 
Veronika: [geek] lj codingkentucka on September 7th, 2010 08:12 pm (UTC)
like I said, play with the number of the padding-top. you'll have to choose what you want it to look like. maybe something like 540px is closer to what you want.

the background color of the cat face and the userpic box unfortunately is the way it is, there's no helping it. that's why I said the layout isn't very good for high banners.
 
 
Everdeereverdeer on December 31st, 2010 06:38 am (UTC)
I am so confused and having so much trouble. I have managed to get the colors to work but the layout is all wonky still.

I want to use this premade stylesheet http://ohbambi.net/ohcodey/misccodes/Saturnalia.css

Why cant I just put in the link and have it work. D: I am such a scrub.
 
Veronika: [geek] lj codingkentucka on December 31st, 2010 12:17 pm (UTC)
you can, that's an "external stylesheet".

this entry only gives you an overview over all the possibilites for adding CSS, and how they interact if they're combined. that's something that unfortunately isn't exactly well documented on LJ.

if the stylesheet you linked is hosted by the layout creator, save the .css file and upload it somewhere, where you can host it yourself. that way you won't lose it all if the maker ever decides to take it down, or renames the file.
then put the link to your own hosted version of the file in the "Custom external stylesheet URL" field in the customization wizard.

or, if you can't host the file, you can try to just copy&paste the whole text from the .css file into the "Custom stylesheet" textbox. but the textbox has a character limit, so if there's a lot of CSS it might cut it off.
 
cateyes8588cateyes8588 on December 31st, 2010 07:26 pm (UTC)
(this is my alt account, still everdeer here though lol)

I completely figured it out about 30 seconds after posting. I had the wrong base theme, this is for floating boxes. I didn't understand/realize you still needed to pick a theme derp.

thank you so much for the help!