WordPress.org

Forums

Customizr
Change settings in color.css file in child style.css (8 posts)

  1. jhippie
    Member
    Posted 11 months ago #

    I am just trying to learn to modify customizr - specifically the appearance of the text displayed on the slider.
    I want to change the font size, width of the text block, etc. in the carousel slider. Would like very large text in a square block, no slider text background behind the text. I am looking for the correct file to make these changes.
    I found a snippet on the customizr snippet collection that says I can make some changes with this code placed in my child style.css:

    /* Change Slider Titles (2em) font-size, (Garamond) family, (red) color */
    .carousel-caption h1 {
    font-family:    Garamond;
    font-size:      2em;
    color:		red;
    }
    .carousel-caption p {
    font-family:    Garamond;
    font-size:      2em;
    color:		blue;
    }
    .carousel-caption .btn {
    font-family:    Garamond;
    font-size:      2em;
    color:		yellow;
    }

    Since this should have made very obvious changes, I can only say that this has no effect when placed in my child style.css file.

    Using inspect element in chrome, I see that black.css seems to be the source for <div class="carousel-caption">
    I followed the instructions on customizr site to make a child version of black.css; but I am still struggling with how to make these changes to the font on the slider only and to make the length of each line shorter.
    Most of the help I've found online is far more technical than I am so far.

  2. acub
    Member
    Posted 11 months ago #

    1. Your code is valid.
    2. You do not need to create a child version of black.css. You need to place your code inside style.css of your child theme.

    Here is how the your child theme's style.css should look like:

    /*
     Theme Name:     Customizr Child
     Theme URI:      http://example.com/
     Description:    Your description
     Author:         You
     Author URI:     http://example.com/
     Template:       customizr
     Version:        1.0.0
    */
    /* Add your custom CSS code below this line */
    
    .carousel-caption h1 {
    font-family:    Garamond;
    font-size:      2em;
    color:		red;
    }
    .carousel-caption p {
    font-family:    Garamond;
    font-size:      2em;
    color:		blue;
    }
    .carousel-caption .btn {
    font-family:    Garamond;
    font-size:      2em;
    color:		yellow;
    }

    Of course, you should add your own details (name, website, etc)... Do not touch the Template: customizr line.

    Your functions.php (if you have not added any php custom code to it) should look like this:

    <?php
    // Add your custom php code below this line

    This is all you need to get started. Just activate the child theme and you will see the css applies, if you haven't damaged the parent theme and if your child theme does not contain any other files that interfere.
    If it doesn't, just delete any other files you might have added in child theme and/or reinstall the parent.
    The two files I mentioned above should be placed in the root of the child theme.

  3. jhippie
    Member
    Posted 11 months ago #

    Acub, Thank you for your reply.
    Part one is resolved thanks to knowing that it "should" work, I just kept dicing around with it until it did. I do have a functioning child style.css and child functions.php - both of which are working for other modifications. However, when I added the carousel-caption code at the bottom of the style.css, it did not change the appearance of any of the text. Then I moved it to the top of the file. No difference. Then I "accidentally" found that I when I hit enter for a line return after pasting the entry it worked. So either moving it to the top or the line return made it work.

    So I move on to part two of the question...how to get the look I really want.
    So now I managed to turn off the background, and do some modification to the font family, color, position, letter spacing, and make it UPPERCASE for the title part. The size is baffling me, because it got bigger, but not as much bigger as I expected - 50em seems to return the same result as 10em. Is there a limit?
    You can see the current state here: http://studiof.com/

    These settings aren't right yet, but now I do know where/what they are in order to experiment.

    /* change slider text */
    .carousel-caption h1 {
    font-family:    Arial, Helvetica, sans-serif
    font-size:      50em;
    letter-spacing: 0.12em;
    color:		white;
    text-transform: uppercase;
    line-height:    .9;
    }
    
    /* change slider background */
    .carousel-caption {
     background: rgba(0, 0, 0, 0.00);
    }
    
    /* Example move block up and to left */
    .carousel-caption {
    position:   relative;
    top:       20px;      /* 0px is top of element */
    left:     -10%;       /* 0% is left of element */
    }

    So now, I'm trying to figure out what properties are required to get a BIG BLOCK of uppercase san-serif text for the title of each slide and to position it where I want. I think I need to do some margin/padding/border something like that to make the line length shorter. What I am actually hoping to do is have text that looks like the example here:
    http://studiof.com/trending/

    This is just an image, what I actually want is a big block of (live) text like this over my image. I also want to contain the size and alignment of the block of text. As if this isn't enough, I also want to have it responsive. I was hoping the em thing or using percentage would help me do the responsive part. (One big problem I expect is with position in other devices...)

    Any suggestions for blocking this thing out and making the font really large like my example without having to go deeply into the "reponsive thing"?

  4. ElectricFeet
    Member
    Posted 11 months ago #

    Try using a great editor like Sublime Text to edit your CSS and you'll see a couple of errors in your CSS file:

    .carousel-caption h1 {
    font-family:    Arial, Helvetica, sans-serif
    font-size:      50em;
    letter-spacing: 0.12em;
    color:		white;
    text-transform: uppercase;
    line-height:    .9;
    }

    The first declaration is missing an ending ";" (and it's good practice to add it to the last one, too, for when you add another declaration later). We've all been there :-) So it should be:

    .carousel-caption h1 {
    	font-family: Arial,Helvetica,sans-serif;
    	font-size: 50em;
    	letter-spacing: 0.12em;
    	color: #fff;
    	text-transform: uppercase;
    	line-height: 0.9;
    }

    (With a 50em font size, you won't notice a .12em letter-spacing; you'll need to up it or leave it out.)

    Your last media query is missing its last closing curly bracket. It should be:

    @media (max-width: 979px) {
    	.tc-header .brand {
    		width: auto;
    	}
    	.row-fluid .offset1:first-child {
    		margin-left: 0;
    	}
    }

    (Not sure what you're trying to do with those two declarations in there: the first looks like it might disrupt a few things on the site if it's not made more specific and the second will generally not have any effect at those widths anyway.)

    Again, watch those closing ";"s to save yourself future errors.

    You might want to do some grouping in there, too. For example, there are three .navbar .navbar-inners in there, with the first setting up a box-shadow and the third turning it off again (twice, and with an extraneous -moz prefix, which isn't necessary).

    Being <del>anal</del> consistent about CSS formatting will help you spot errors.

    Hope the above comes across as constructive. I realize you're on a learning curve. It's looking very good so far.

  5. jhippie
    Member
    Posted 11 months ago #

    Thank you, thank you, thank you. Such great explanations and yes - very constructive. I often feel as though I am so far behind the curve that no one wants to bother with my questions. You have given me much to consider and check and BTW, the links you supplied are excellent. I know what I will be doing for the next few hours.

    Amazing what a ";" can do. My changes now show up!

    I need to go back and look at the .navbar references - these may be cumulative from snippets on the customizr site - applied based on visual results without completely understanding the details. The coding structure page you referenced looks like it will be very helpful.

    Two other parts to my big lumpy question that I would appreciate pointers on:
    I guessing that the caption line length (or width?) has something to do with the "box model" I've been reading about. Suggestions about how to make the line of text only extend maybe 25-30% of the slider width.

    Positioning of the caption - I am using this from the customizr snippet suggestions. Do you think this is positioning from the center of the caption (ex. line 2 of a 3 line caption) or the top or the bottom? After modifying the em size and adding the ";", I can now see the caption stacking and the position shifts on each slide - maybe kind of centering on the slide. Could you give a few hints on what the position is "relative to"?
    `/* Example move to bottom-left */
    .carousel-caption {
    position: relative;
    top: 20px; /* 0px is top of element */
    left: -10%; /* 0% is left of element */
    }
    Again, thank you so very much for your generous help.

  6. ElectricFeet
    Member
    Posted 11 months ago #

    [ Spotted an error in my text above "the first looks like ... and the second ..." should read "the second looks like ... and the first ..." ]

    Another link I found repeatedly useful at the beginning is this and also the Introduction, Selectors and How To links at the top of the left sidebar. W3Schools has its detractors, but I find it a good place to quickly get syntax and try stuff out. And the Firebug video transforms your relationship with CSS.

    This will limit your caption width:

    .carousel-caption {
        max-width: 30%;
    }

    Relative and absolute positioning is a whole subject by itself. It took me ages to wrap my head around the concepts. It will "click" at a particular point (hopefully right at the beginning).

    To give yourself absolute control over the positioning of a child element within a parent element, the parent element must have a position of relative and the child element must have a position of absolute.

    It seems counter-intuitive that you have to mess with the parent to get the child to behave ... until, that is, you draw parallels with real lifeā€”then it's easy to remember :-)

    More details here.

    (The CSS tricks site is a mine of info too. All the blog posts from the last 3-4 years were my bed-time reading for a while. I learned most of my CSS best-practice rules that way.)

  7. jhippie
    Member
    Posted 11 months ago #

    Again, I thank you. I now have a folder full of bookmarks that look understandable. I feel certain I'm on the road to being smarter with CSS. (In a way, those wonderful "snippets" on the customizer site are a double edged sword. I often find a quick fix, but sometimes get lazy and use them without really understanding what they are doing.)

    I had noticed the link to the firebug video on the customizr site before and instead of using firebug, just kept struggling with the chrome developer tools. Guess I'll be starting up firefox again...right after months of updates finish :)

    I'm reluctant to be greedy, but do you have any suggestions for a really simple starting place to understand responsiveness? (Maybe that's an oxymoron?) For example, I your pointers have helped me take the text on the slider to a place that looks close to my desired design on desktop and maybe tablets - but when I give a shrink down to check out smaller devices - wah wah wah - nasty. That big beautiful text just runs off the slider. Somehow I thought that using the "em" as my scaling device was some kind of magic bullet.

    So far whenever I look at most documentation on working with small device screens, my eyes glaze over. I'm guessing that I have to add some of the "@media" qualifiers to make this work for small screens. A starting point for learning how to do that would be greatly appreciated.

    /* change slider text */
    .carousel-caption h1 {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      5em;
    letter-spacing: 0.1em;
    color:		fff;
    text-transform: uppercase;
    line-height:    .8;
    }

    Thank you again for all of the really helpful information. Not just a how to, but a why it works.

  8. ElectricFeet
    Member
    Posted 11 months ago #

    The underlying Bootstrap's 2.3.2 documentation on the grid system and responsive design and Dave's article on media queries should keep you busy for the rest of the weekend :-)

    I ignore devices per se and stick to the breakpoints used in the underlying Bootstrap and Customizr. These are:

    @media (min-width: 1200px) {}
    @media (max-width: 1200px) {}
    @media (min-width: 980px) {}
    @media (max-width: 979px) {}
    @media (min-width: 768px) and (max-width: 979px) {}
    @media (max-width: 767px) {}
    @media (min-width: 480px) and (max-width: 767px) {}
    @media (max-width: 480px) {}
    @media (max-width: 320px) {}

    The (min-width: 480px) should more rightly be (min-width: 481px), otherwise, whoever has the last word will grab the exactly=480 spot. The (min-width: 980px) can pretty much be ignored; it's only used once.

    Yes, "em"s should hack it, generally. But you're aiming at moving goalposts, because the underlying Customizr CSS is changing the font sizes in pixels. So while 3em might look good to you aesthetically on one screen size, the Customizr size-change at the next breakpoint may make it look bad to you at the next setting down.

    One thing that web developers didn't get when they invented CSS (which is effectively a "one size fits all (pages)" approach), is that good design is also about designing around your content. So even the words you are using may mean a choice of different font-size multipliers. Luckily, Customizr's slider has a different class for each slide, so you could even play around with that if you want.

    Personally, to be pixel-perfect on the slider, I switched to Meta Slider, as it gives a little bit more control over sizing than Bootstrap's carousel (which is what Customizr uses). You'll still need the media queries, but controlling overflowing and placement is easier.

Reply

You must log in to post.

About this Theme

About this Topic