Motif theme: grid page makeover

  • Unknown's avatar
    orangemediatique · Member ·

    Hi there,
    I’ve just created a grid page on my blog (http://orangemediatique.wordpress.com/references/). Now, I would like to customize it! Here are my questions (as a newbie, I always have a lot of questions but I am sure that, one day, I’ll be in a position to answer questions!):
    – is it possible to have a picture in the background instead of this sad grey box? If not, can I, at least, change the grey in a more lively color?
    – is it possible to make the main box (the one with the title – “Références” – of the page) smaller?
    – In each little child page box, is it possible to change the style and the color of the font (at the moment, it’s grey and sad…)?
    – Is it possible to delete the link on the title of each child page boxes (for instance, on “Maaf”, I don’t want these pages to be accessible)? And is it possible to make these titles invisible?
    Thanks a lot, cheers!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    justpi · Member ·

    1a. The theme has a ‘responsive’ layout: its sections change size and shape to adapt to different screen resolutions and devices. So, although it’s possible, adding a background image is questionable: each visitor would see some of it, or more of it, or less of it, depending on their screen resolution or device. So it might be ok only
    if you use an abstract design, or a small image that will repeat vertically and horizontally to create a texture.

    1b. Changing the bg color is easy. If you want to change it on that page only, add this and replace 456789 with the hex for the color you prefer: 

    .page-id-94 .site-content {
background-color: #456789;
}

    If you want the same bg color on all your pages, add this instead: 

    .site-content {
background-color: #456789;
}

    2. If you mean shorter in height, try this first and see if it’s enough: 

    .page-id-94 .entry-content {
padding-top: 0;
padding-top: 0;
}

    But if you change this, shouldn’t you also change the same box on the “Contacts” page?

    3. To change the font color, add this and replace 123456 with the hex for the color you prefer: 

    .grid-row .entry-summary {
color: #123456;
}

    4a. Do you mean remove the dropdown from the menu?

    4b. Add this: 

    .post-96 .entry-title, .post-104 .entry-title {
display: none;
}
  • Unknown's avatar
    orangemediatique · Member ·

    Thanks a lot Justpi! This is awesome! However, I am afraid that your advice arouses new questions:)

    1/ You’re right, I had not realize that my theme has a responsive layout.
    I’ve change the bg color on the “Réferences” page and I like it better this way. On the other hand, I am not satisfied of the bg on the “Contacts” page. Initially, I wanted to put on the bg of every pages the same kind of picture that the feature image of the front page. Would you explain me how to do it? If the result is disappointing because of the responsive layout, I will try something else.

    2/ As I might add some more text, I think it will be ok. Do you know to center vertically the text in the box? Is it possible to make the box shorter in width?

    I’ve also a new concern regarding these boxes. Can I change their color (change the white in green and the light grey in yellow, for instance)?

    4a/Yes, I would also like to remove the dropdown from the menu! Is it possible?

  • Unknown's avatar
    justpi · Member ·

    You’re welcome.

    1/ Try replacing this: 

    .site-content {
background-color: #456789;
}

    with this: 

    .site-content {
background-color: transparent;
}
.site-content:nth-child(2) {
background: url("http://orangemediatique.files.wordpress.com/2014/01/orangestranchesgrande.jpg") no-repeat scroll center 0 transparent;
background-size: 100% auto;
}

    2/ Yes and yes, but I’d rather wait till I see that “more text”.
    By the way 1, why did you format that single line of content as an h2?
    By the way 2, there’s no point changing the color in the post editor when you have the Custom Design upgrade: you can do it once for all in the CSS editor.

    2new/ Add this and change the hex numbers: 

    .entry-header {
background-color: #123456;
}
.entry-content {
background-color: #456789;
}

    If you need a reference page for colors and hex numbers, here’s one:
    http://www.december.com/html/spec/color.html

    4a/ You could create a custom menu in Appearance > Menus and add only the items you want. But you can also do it the CSS way: 

    .main-navigation ul ul li {
display: none;
}
  • Unknown's avatar
    orangemediatique · Member ·

    Hi Justpi!
    You must be a magician.
    1/ It is exactly what I was looking for!

    2/ There might be a 2nd line of text but no more. Does that make a difference?
    btw1 – Well, I formatted it in h2 because I wanted it bigger than usual post text. But I guess there is an easier/better way to achieve this result? (Now, I remember that I’ve read somewhere that h2 must come after h1…)
    btw2 – I hadn’t thought about that! What would be the code to change the color of every post texts?

    2new/ This is great! It’s opening up new horizons!
    Now, I wonder if I can make the bg of the front page text box transparent.
    I’ve tried this:

    .home  .entry-content {
background-color: transparent;
}

    but it’s not working…

    4a/ Perfect!

  • Unknown's avatar
    justpi · Member ·

    a) #1 seems exactly what you were looking for, but there’s a problem: the version I suggested makes the image stretch or shrink along with the changing width of the content, so on narrow devices you’ll see green bg color below the image. Better turn this line:
    background-size: 100% auto;
    to this:
    background-size: 1140px auto;

    b) The HTML for headings has a meaning for search engines as well as screen readers, so you only use it for actual titles and subtitles, not to make some text bigger. So first edit your pages and remove these: 

    <h2>
</h2>
<span style="color:#ff0099;">
</span>

    c) “.home .entry-content” was close! It doesn’t work because that’s the area below the heading while you need to change the bg of the entire entry (containing both heading and content). Also, there’s a shadow effect around the white box, which must probably go if you make the box transparent. So: 

    .home .hentry {
background-color: transparent;
box-shadow: none;
}

    (And since you like new horizons, the box could also be semi-transparent instead of fully transparent.)

  • Unknown's avatar
    orangemediatique · Member ·

    a) #1 Done. However, I am not sure it’s doing the trick. I’ve visited my blog on a small iPad and, on the “contacts” and “références” pages, the image does stretch. It’s not that bad because it represents oranges slices but I guess that, if I put a picture of my face for instance, it will be a problem!

    b) Wonderful! Thanks to your clue, I’ve discovered how to change the size of the police without using html.

    c) You’re right, I am very interested by semi-transparent (I realized that transparent won’t do it)! I’ve tried to add 50% before transparent and after… Not working. It’s seems a word is missing!

    I also try to make another post transparent on the Références pages like this:

    .post-94 .hentry {
background-color: transparent;
box-shadow: none;
}

    … not working. This is very intriguing!

  • Unknown's avatar
    justpi · Member ·

    a) My original suggestion made the image conform to the content width, so on narrower screens you see the entire image, scaled down (and that’s wrong on portrait-shaped screens). My new suggestion inserts a fixed-size image, so on narrower screens you should see part of it. As I noted from the start, there’s no perfect solution when the theme is responsive.

    b) You discovered a way to do it in the Text editor, but you don’t need any of this when you have the upgrade. Remove these: 

    <span style="color:#ff0099;font-size:25px;">
</span>

    and add this in the CSS editor: 

    .entry-content {
color: #FF0099;
font-size: 180%;
}

    c1) Unfortunately the code you need isn’t as obvious as we might like: you need RGBA color coding. Replace this line:
    background-color: transparent;
    with this:
    background-color: rgba(255, 255, 255, 0.5);
    Change the decimal to adjust the degree of opacity, change the other three numbers to make it colored instead of white.

    c2) This:
    SEL1 SEL2 {
    means target SEL2 of SEL1.
    So this:
    .home .hentry {
    means target articles on the homepage only.
    If you inspect things on page 94, you’ll see that “.post-94” and “.hentry” are both classes of “article”. So this:
    .post-94 .hentry {
    means target articles on article 94, which doesn’t make sense. The equivalent of “.home .hentry” on page 94 is:
    .page-id-94 .hentry {

    And if you want to make the bg transparent or semi-transparent on page 94, the code I suggested for the homepage isn’t enough. I’ll let you figure out why!

    (d) I owe you a reply to this:
    “There might be a 2nd line of text but no more. Does that make a difference?”
    Maybe yes, maybe no: depends on whether the 2nd line is a new paragraph or not.

  • Unknown's avatar
    orangemediatique · Member ·

    Hi Justpi, thanks again for your gentle guidance and your patience!

    a) I will test the 2 options with different images on different screens and see which one is the best.

    b) Done. I admit this method is simpler. However, it seems that it makes the text box bigger. As if the text (even if the font is still 25px) needs more room. I can’t explain it.

    c) is driving me nuts!
    I don’t understand why this is working to change the bg colors: 

    .page-id-50 .entry-header {
background-color: #123456;
}
.page-id-50 .entry-content {
background-color: #456789;
}

    and this is not working to make it transparent: 

    .page-id-50 .entry-header {
background-color: transparent;
}
.page-id-50 .entry-content {
background-color: transparent;
}

    Very weird! Is there a layer of white behind the header and the main content?

    d) I’ve added a 2nd line which is not a new paragraph.

    Another thing I don’t understand: why on the “Références” text box, the text goes on the top whereas on the “Contact” text box, it goes a bit lower than the top… It might have something to see with the grid page template?

    CSS seems to be a endless story!

  • Unknown's avatar
    justpi · Member ·

    a)

    As I said, option 1 is wrong in portrait-shaped screens. If you prefer this option, you must set the image to repeat vertically, by replacing this:
    no-repeat
    with this:
    repeat-y

    If you select option 2 (fixed size, partial display on smaller screens) you can also experiment with the positioning. This:
    center 0
    means display middle part horizontally, top part vertically. You can try 0 0 (display top left part), 0 center, center center.

    b)

    1. The 180% I suggested was just an example: change the percentage to adjust the font size.

    2. The box becomes bigger because my suggestion changes the font size of paragraphs while you had incorrectly used span tags to change it. Span tags are used for characters, words or phrases inside a paragraph, not for a complete paragraph. So (third time I’m saying this!), remove the span tags.

    c)

    “Is there a layer of white behind the header and the main content?”
    Yes: entry-header and entry-content are inside entry (which has a white bg); if you add a bg color to entry-header and entry-content, it shows in front of the entry bg; if you make entry-header and entry-content transparent, you see the entry bg.

    d)

    On the “Références” text box, the text shows higher because that’s what you asked for! Check your very first group of questions and my first reply, #2, including my objection:

    But if you change this, shouldn’t you also change the same box on the “Contacts” page?

    And I just noticed that my code there is wrong (oh the perils of copypasting!); I wrote this: 

    .page-id-94 .entry-content {
padding-top: 0;
padding-top: 0;
}

    But I meant this: 

    .page-id-94 .entry-content {
padding-top: 0;
padding-bottom: 0;
}

    So, if you want reduced space on all pages, delete the “.page-id-94 ” part of the selector.

  • Unknown's avatar
    orangemediatique · Member ·

    Hi Justpi! Thanks again and again.

    a) I am testing this repeat-y for the moment which is great. When I have another image, I will try again option 2.

    b) I had not realized that I was so keen on these span tags and that I had put some of them in almost every pages! Now, I think I’ve definitely kicked off this bad habit.

    c) Arrrgh, what a challenge!
    I thought this would make everything transparent: 

    .page-id-50 .entry {
	background-color: transparent;
} .entry-header {
	background-color: transparent;
} .entry-content {
background-color: transparent;
}

    I was wrong. I tried to add !important here and there (I’ve seen it in other discussions…). It didn’t change anything! How come such a little change is so complicated?

    d) I should have noticed this strange repetition.

    e) I’ve got a new question (if you’re tired of this, I will understand!): Is it possible to remove the header of a post (I am thinking about the La Roche-Posay post for instance, as I’ve made the title invisible, this empty grey bar is not necessary)?

  • Unknown's avatar
    justpi · Member ·

    You’re welcome!

    Re #c, notice previous posts above: the selector for an article isn’t .entry, it’s:
    .hentry

    Re #e, when you have the upgrade you can remove almost anything. Add this: 

    #post-96 .entry-header {
display: none;
}
  • Unknown's avatar
    orangemediatique · Member ·

    Hi Justpi,

    On the Références page, I’ve managed to make entry-content transparent but I didn’t manage to do it with headers… Which is no longer a problem now that you taught me how to remove headers! Thanks!!!

    I’ve got a handful of news questions. I will start a new discussion because I feel guilty taking so much of your time!

    Cheers

  • The topic ‘Motif theme: grid page makeover’ is closed to new replies.