• Resolved spinzero

    (@spinzero)


    So I’ve been searching for themes for a while. I was therefore very happy to see an Automattic (Mel Choyce) developed theme that had the beautiful interface I was looking for.

    A few things that are a little frustrating;

    1. The blog title always default to CAPITALS – which is very immediate and off-putting for a theme that is otherwise elegant and subtle.
    2. The one big thing I am hoping for; an option to remove the sidebars in Blog/Post views. The two right sidebars makes the whole theme lopsided. Also, when the theme scales to small screens, the two sidebars stack on top of the footer widgets – giving one huge list of widgets etc.
    3. The top banner image has some kind of opaque filter applied to it. Please give us an option to turn this off so that we can just leave the image in its original state.
    4. Speaking of the banner image, it would be great to be able to set an image with variable vertical height.

    Most importantly for me, if you could give us an option to remove the sidebars, that would be wonderful :).

    I hope you can make this change, as it’ll make an already excellent theme that much better.

    Thanks for reading

Viewing 15 replies - 1 through 15 (of 19 total)
  • you can make these changes:

    1 – https://www.w3schools.com/cssref/pr_text_text-transform.asp

    2 – https://www.ads-software.com/support/topic/removing-a-sidebar-from-all-pages-charitas-lite-theme?replies=2

    3- you can ispect the image and look what propertie are making that and disable them

    4 -https://www.w3schools.com/cssref/pr_dim_height.asp

    Moderator Kathryn Presner

    (@zoonini)

    Thanks, iagofabre!

    spinzero – glad you’re liking Cerauno!

    If you need further help with making any of these tweaks in your child theme, let us know.

    Thread Starter spinzero

    (@spinzero)

    Thank you Tiago, and my apologies for not having done so sooner!

    Title text:
    I have found a very simple workaround for the capitalised text issue which I am sure would be very useful for other people out there in my position (i.e., with no real coding expertise);

    https://www.ads-software.com/plugins/easy-google-fonts/

    That plugin has allowed me to restore normal text formatting for the title, and also implement my preferred font :). I’ve also been able to change the formatting of paragraphs and other headers (h1/2/3/4 etc). A great little app that can be used from within the theme customiser

    Sidebars:
    I’ve tried my best to follow the various guides out there, but only really succeeded in making a hash of my website :). I think the theme I am using is more complex owing to it having two right hand sidebars. As such, although I can disable them from showing up, I just can’t figure out how to get the remaining content to align in the centre.

    I shall keep trying though :).

    But yes, thank you for your suggestions – they have been helpful in pointing me in the right direction.

    Thread Starter spinzero

    (@spinzero)

    @kathryn,

    Thank you for the offer of help. I’m sure I’ll work out how to get my content to align centrally on a site-wide basis…however, since you work for Automattic, I am guessing you probably have a brilliant understanding of this theme :)? Assuming you do, I would greatly appreciate any suggestions you have that will allow the following kind of content;

    Example; blog page
    Example; test blog post
    Example; 404 error page

    …to align centrally in the same way that normal pages align, eg;

    Homepage

    Basically, I just want my whole website to align centrally. I will not be using the sidebar at all…
    I would also like to eventually expand this content to cover 70% of the screen rather than the 50% it seems to at the moment. (I think I’ll save that battle for another day though).

    If you helped build this theme, then thank you! It is near enough exactly what I was after. Infinite scroll would have been nice, as would the option to switch off the sidebars – but other than that, it is almost perfect for my needs (a cycle touring/charity fundraising website).

    Many thanks ??

    Thread Starter spinzero

    (@spinzero)

    Ok, so here’s an update with regards my blog…

    – I’ve managed to change the size and the hover colour of the social icons (and change the social icon for YouTube)

    – I’ve managed to make the featured images span the entire width of the website (rather than having padding).

    – I’ve managed to increase the main content with to 70%, which suits the kind of website I am making.

    – I’ve managed to change the text type and size for the various headers on the website.

    However, I just cannot make the content on pages/posts align to centre.

    I can make the content justify to the right hand side by changing the following code on the style.css Child Theme file;

    /*=Layout
    —————————————————————————*/

    }
    .site-main {
    float: right
    width: 70%;

    However, if I change ‘float’ to center(centre) or none, it simply reverts back to justifying to the left hand side of the page.

    If anyone can provide some help or guidance, I would greatly appreciate it :). I’m so close to having the website I was hoping to build.

    Many thanks

    you can use padding left

    padding-left: 30%;
     width: 70%;

    But I dont know if it is the best theme to start. There is better solutions to customize themes, start with bootstrap is great, it has a Grid system awesome, and works easely for every screens
    https://getbootstrap.com/examples/grid/

    I am making a theme just like this, and I pretend to depoly it this week, if you wanna be my tester… You can tell me what you need and I put in the theme…

    the theme I am making is based on
    https://ironsummitmedia.github.io/startbootstrap-clean-blog/

    and I want to make a parallax system just like this:
    https://preview2.artlessthemes.com/

    Thread Starter spinzero

    (@spinzero)

    Thank you for your continuing help Tiago…I really appreciate it.

    In all honesty, this theme is near enough perfect for my needs already. It may not be technically brilliant, but it does what I need it to do…specifically;

    – When the pages scale to smaller screens, the full menu is still visible. (I really dislike the hamburger menu – particularly as I find many people still don’t even know what it is or what it does!)
    – No fancy effects…just clean/simple
    – Full width featured images
    – Footer widget area with a background that is white.
    – Social sharing icons in the top right corner of the website
    – Works with infinite scroll

    I personally really like parallex effect websites – but they just don’t really work for my target audience (where simplicity is key). Also, I want to catch the last of the summer in Scandinavia ?? — so the less time I spend on this website, the better…

    I would be very interested to see your theme though. It sounds like you are building something that will potentially suit my needs.

    Anyway, I tried adding

    padding-left: 30%;
    width: 70%;

    But it doesn’t seem to do anything?

    I have copied my child theme style.css sheet below. If you get a moment, could you see if there is anything I can amend to get the website displaying content correctly?

    Thank you

    /*
    Theme Name: Cerauno Child 02
    Theme URI:
    Description: Child 02 theme for the Cerauno theme
    Author: Automattic
    Author URI:
    Template: cerauno
    Version: 1.0.1
    */

    /* Generated by Orbisius Child Theme Creator (https://club.orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/) on Sat, 08 Aug 2015 17:06:54 +0000 */

    @import url(‘../cerauno/style.css’);

    /*
    Theme Name: Cerauno
    Theme URI: https://wordpress.com/themes/cerauno/
    Description: Cerauno is a polished, user-friendly magazine theme with plenty of customizable features. Add secondary content in up to five widget areas, brand your content with a Site Logo or Custom Header, and add Featured Images to grab your readers’ attention.
    Version: 1.0.1
    Author: Automattic
    Author URI: https://wordpress.com/themes/
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: cerauno
    Tags: blue, white, three-columns, right-sidebar, custom-background, custom-header, custom-menu, featured-images, flexible-header, full-width-template, rtl-language-support, translation-ready, responsive-layout

    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you’ve learned with others.

    Cerauno is based on Underscores https://underscores.me/, (C) 2012-2015 Automattic, Inc.
    Underscores is distributed under the terms of the GNU GPL v2 or later.

    Normalizing styles have been helped along thanks to the fine work of
    Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/
    */

    /*————————————————————–
    >>> TABLE OF CONTENTS:
    —————————————————————-
    # Normalize
    # Typography
    # Elements
    # Forms
    # Navigation
    ## Links
    ## Menus
    # Accessibility
    # Alignments
    # Clearings
    # Widgets
    # Content
    ## Posts and pages
    ## Asides
    ## Comments
    # Infinite scroll
    # Media
    ## Captions
    ## Galleries
    ————————————————————–*/

    /*————————————————————–
    # Normalize
    ————————————————————–*/
    html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    }

    body {
    margin: 0;
    }

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    main,
    menu,
    nav,
    section,
    summary {
    display: block;
    }

    audio,
    canvas,
    progress,
    video {
    display: inline-block;
    vertical-align: baseline;
    }

    audio:not([controls]) {
    display: none;
    height: 0;
    }

    [hidden],
    template {
    display: none;
    }

    a {
    background-color: transparent;
    }

    a:active,
    a:hover {
    outline: 0;
    }

    abbr[title] {
    border-bottom: 1px dotted;
    }

    b,
    strong {
    font-weight: bold;
    }

    dfn {
    font-style: italic;
    }

    h1 {
    font-size: 2em;
    margin: 0.67em 0;
    }

    mark {
    background: #ff0;
    color: #000;
    }

    small {
    font-size: 80%;
    }

    sub,
    sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    }

    sup {
    top: -0.5em;
    }

    sub {
    bottom: -0.25em;
    }

    img {
    border: 0;
    }

    svg:not(:root) {
    overflow: hidden;
    }

    figure {
    margin: 1em 40px;
    }

    hr {
    box-sizing: content-box;
    height: 0;
    }

    pre {
    overflow: auto;
    }

    code,
    kbd,
    pre,
    samp {
    font-family: monospace, monospace;
    font-size: 1em;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    }

    button {
    overflow: visible;
    }

    button,
    select {
    text-transform: none;
    }

    button,
    html input[type=”button”],
    input[type=”reset”],
    input[type=”submit”] {
    -webkit-appearance: button;
    cursor: pointer;
    }

    button[disabled],
    html input[disabled] {
    cursor: default;
    }

    button::-moz-focus-inner,
    input::-moz-focus-inner {
    border: 0;
    padding: 0;
    }

    input {
    line-height: normal;
    }

    input[type=”checkbox”],
    input[type=”radio”] {
    box-sizing: border-box;
    padding: 0;
    }

    input[type=”number”]::-webkit-inner-spin-button,
    input[type=”number”]::-webkit-outer-spin-button {
    height: auto;
    }

    input[type=”search”] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
    }

    input[type=”search”]::-webkit-search-cancel-button,
    input[type=”search”]::-webkit-search-decoration {
    -webkit-appearance: none;
    }

    fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.8em;
    }

    legend {
    border: 0;
    padding: 0;
    }

    textarea {
    overflow: auto;
    }

    optgroup {
    font-weight: bold;
    }

    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    td,
    th {
    padding: 0;
    }

    /*————————————————————–
    # Typography
    ————————————————————–*/
    body,
    button,
    input,
    select,
    textarea {
    color: #495762;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    clear: both;
    color: #495762;
    font-family: Montserrat, Tahoma, sans-serif;
    line-height: 1.3;
    }
    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
    color: #495762;
    }
    h1 {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 3.125em;
    }
    h2 {
    margin-bottom: 15px;
    font-size: 38px;
    }
    h3 {
    font-size: 28px;
    }
    h4 {
    font-size: 24px;
    }
    h5 {
    font-size: 16px;
    }
    h6 {
    font-size: 13px;
    text-transform: uppercase;
    }

    p {
    margin-bottom: 1.6em;
    }

    dfn,
    cite,
    em,
    i {
    font-style: italic;
    }

    blockquote {
    margin: 0 1.6em;
    }

    address {
    margin: 0 0 1.6em;
    }

    pre {
    background: #eee;
    font-family: “Courier 10 Pitch”, Courier, monospace;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
    }

    code,
    kbd,
    tt,
    var {
    font-family: Monaco, Consolas, “Andale Mono”, “DejaVu Sans Mono”, monospace;
    font-size: 15px;
    font-size: 0.9375rem;
    }

    abbr,
    acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
    }

    mark,
    ins {
    background: #fff9c0;
    text-decoration: none;
    }

    big {
    font-size: 125%;
    }

    /*————————————————————–
    # Elements
    ————————————————————–*/
    html {
    box-sizing: border-box;
    }

    *,
    *:before,
    *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
    }

    body {
    background: #fff; /* Fallback for when there is no custom background color defined. */
    font-family: “Karla”, Tahoma, sans-serif;
    font-size: 16px;
    color: #495762;
    line-height: 1.5;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
    content: “”;
    }

    blockquote,
    q {
    quotes: “” “”;
    }

    hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.6em;
    }

    ul,
    ol {
    margin: 0 0 1.6em 2.4em;
    padding: 0;
    }

    ul {
    list-style: disc;
    }

    ol {
    list-style: decimal;
    }

    li > ul,
    li > ol {
    margin-bottom: 0;
    margin-left: 2.4em;
    }

    dt {
    font-weight: bold;
    }

    dd {
    margin: 0 1.6em 1.6em;
    }

    img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
    }

    table {
    border: 1px solid #eee;
    margin: 0 0 1.6em;
    width: 100%;
    }
    th,
    td {
    padding: 0.8em 5px;
    }
    tr:nth-of-type(2n) {
    background: #f9f9f9;
    }
    caption {
    font-weight: bold;
    margin: 0 0 .8em;
    }

    /*————————————————————–
    # Forms
    ————————————————————–*/
    button,
    input[type=”button”],
    input[type=”reset”],
    input[type=”submit”] {
    border: 0;
    background: #eee;
    font-family: Montserrat, Tahoma, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 15px 1.6em;
    text-transform: uppercase;
    transition: 0.2s;
    }

    button:hover,
    input[type=”button”]:hover,
    input[type=”reset”]:hover,
    input[type=”submit”]:hover {
    background-color: #ccd4db;
    }

    button:focus,
    input[type=”button”]:focus,
    input[type=”reset”]:focus,
    input[type=”submit”]:focus,
    button:active,
    input[type=”button”]:active,
    input[type=”reset”]:active,
    input[type=”submit”]:active {
    background-color: #ccd4db;
    }

    input[type=”text”],
    input[type=”email”],
    input[type=”url”],
    input[type=”password”],
    input[type=”search”],
    textarea {
    font-family: “Karla”, Tahoma, sans-serif;
    padding: 15px;
    border: 1px solid #eee;
    background: #eee;
    max-width: 100%;
    transition: 0.1s;
    }

    input[type=”text”]:focus,
    input[type=”email”]:focus,
    input[type=”url”]:focus,
    input[type=”password”]:focus,
    input[type=”search”]:focus,
    textarea:focus {
    border-color: #ccc;
    color: #111;
    outline: none;
    }

    input[type=”text”],
    input[type=”email”],
    input[type=”url”],
    input[type=”password”],
    input[type=”search”] {
    padding: .8em;
    }
    .search-form {
    position: relative;
    }
    input[type=”search”].search-field {
    box-sizing: border-box;
    padding-left: 2em;
    }
    .search-form label:before {
    content: “\f002”;
    font-family: FontAwesome;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    display: block;
    position: absolute;
    top: 1.2em;
    left: .8em;
    -webkit-font-smoothing: antialiased;
    }

    textarea {
    padding-left: .8em;
    width: 100%;
    }

    /*————————————————————–
    # Navigation
    ————————————————————–*/
    /*————————————————————–
    ## Links
    ————————————————————–*/
    a,
    a:visited {
    text-decoration: none;
    color: #495762;
    font-weight: bold;
    transition: 0.1s;
    }
    a:focus,
    a:hover {
    color: #495762;
    text-decoration: none;
    }
    .entry-content a,
    .entry-content a:visited,
    .entry-summary a,
    .entry-summary a:visited,
    .widget a,
    .widget a:visited,
    .entry-meta a,
    .entry-meta a:visited,
    .entry-footer a,
    .entry-footer a:visited,
    .site-footer a,
    .site-footer a:visited,
    .entry-title a,
    .entry-title a:visited,
    .post-navigation a,
    .post-navigation a:visited,
    .posts-navigation a,
    .posts-navigation a:visited,
    .comment-navigation a,
    .comment-navigation a:visited,
    .widget_authors a strong,
    .widget_authors a:visited strong {
    border-bottom: 2px solid transparent;
    }
    .widget a,
    .widget a:visited,
    .site-footer a,
    .site-footer a:visited,
    .entry-meta a,
    .entry-meta a:visited,
    .widget_authors a strong,
    .widget_authors a:visited strong {
    border-bottom-width: 1px;
    }
    .entry-title a,
    .entry-title a:visited {
    border-bottom-width: 3px;
    }
    .entry-content a:focus,
    .entry-content a:hover,
    .entry-summary a:focus,
    .entry-summary a:hover,
    .widget a:focus,
    .widget a:hover,
    .entry-meta a:focus,
    .entry-meta a:hover,
    .entry-footer a:focus,
    .entry-footer a:hover,
    .site-footer a:focus,
    .site-footer a:hover,
    .entry-title a:focus,
    .entry-title a:hover,
    .post-navigation a:focus,
    .post-navigation a:hover,
    .posts-navigation a:focus,
    .posts-navigation a:hover,
    .comment-navigation a:focus,
    .comment-navigation a:hover,
    .widget_authors a:focus strong,
    .widget_authors a:hover strong {
    border-bottom-color: currentColor;
    }
    .widget_authors > ul > li > a:first-of-type,
    .widget_authors > ul > li > a:first-of-type:visited,
    .widget_authors > ul > li > a:first-of-type:hover,
    .widget_authors > ul > li > a:first-of-type:focus {
    border: 0;
    }
    a:focus {
    outline: thin dotted;
    }

    a:hover,
    a:active {
    outline: 0;
    }

    .entry-content a,
    .entry-summary a {
    word-wrap: break-word;
    }

    /*————————————————————–
    ## Menus
    ————————————————————–*/
    .main-navigation {
    border-bottom: 1px solid #eee;
    clear: both;
    display: block;
    margin: 0;
    padding: 1.6em 2.5%;
    text-transform: uppercase;
    width: 100%;
    }
    .main-navigation > div:first-of-type {
    float: left;
    }
    .main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
    }
    .main-navigation li {
    display: inline-block;
    margin-right: 1.6em;
    position: relative;
    }
    .main-navigation .menu li:last-of-type {
    margin-right: 0;
    }
    .main-navigation > div:first-of-type a {
    border-bottom: 2px solid transparent;
    display: block;
    }
    .main-navigation ul ul {
    background: white;
    border: 1px solid #eee;
    float: left;
    position: absolute;
    top: 1.65em;
    left: -999em;
    z-index: 99999;
    }
    .main-navigation ul ul ul {
    left: -999em;
    top: 0;
    }
    .main-navigation ul ul a {
    border-bottom: 0;
    margin: 0;
    padding: .8em;
    width: 200px;
    }
    .main-navigation li:hover > a,
    .main-navigation li.focus > a {
    border-bottom-color: currentColor;
    }
    .main-navigation ul ul :hover > a,
    .main-navigation ul ul .focus > a {
    border-bottom-color: transparent;
    }
    .main-navigation ul ul a:hover,
    .main-navigation ul ul a.focus {
    border-bottom-color: transparent;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li.focus > ul {
    left: auto;
    }
    .main-navigation ul ul li:hover > ul,
    .main-navigation ul ul li.focus > ul {
    left: 100%;
    }
    .main-navigation > div:first-of-type > ul > .current_page_item > a,
    .main-navigation > div:first-of-type > ul > .current-menu-item > a {
    border-bottom-color: currentColor;
    }
    .main-navigation ul li.menu-item-has-children,
    .main-navigation ul li.page_item_has_children {
    margin-right: 3em;
    }
    .main-navigation ul li.menu-item-has-children > a:after,
    .main-navigation ul li.page_item_has_children > a:after {
    content: “\f078”;
    font-family: FontAwesome;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    opacity: 0.4;
    position: absolute;
    right: -1.6em;
    top: 3px;
    vertical-align: text-top;
    -webkit-font-smoothing: antialiased;
    }
    .main-navigation ul ul li.menu-item-has-children > a:after,
    .main-navigation ul ul li.page_item_has_children > a:after {
    content: “\f054”;
    display: inline-block;
    margin-top: 3px;
    margin-left: 10px;
    opacity: 0.4;
    position: static;
    vertical-align: text-top;
    }

    /* Social Links */

    .social-links {
    display: none;
    float: right;
    line-height: 1;
    }
    .social-links li {
    margin-right: 15px;
    font-size: 24px;
    }
    .social-links li:last-of-type {
    margin-right: 0;
    }
    .social-links li a:before {
    content: “\f1e0”;
    color: #495762;
    font-family: FontAwesome;
    font-size: 25px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    transition: 0.2s;
    -webkit-font-smoothing: antialiased;
    }
    .social-links li a:hover:before {
    color: #c51d1d;
    }
    .social-links li a:hover {
    text-decoration: none;
    }
    .social-links ul a[href*=’www.ads-software.com’]:before,
    .social-links ul a[href*=’wordpress.com’]:before {
    content: ‘\f205’;
    }
    .social-links ul a[href*=’facebook.com’]:before {
    content: ‘\f230’;
    }
    .social-links ul a[href*=’twitter.com’]:before {
    content: ‘\f099’;
    }
    .social-links ul a[href*=’dribbble.com’]:before {
    content: ‘\f17d’;
    }
    .social-links ul a[href*=’plus.google.com’]:before {
    content: ‘\f0d5’;
    }
    .social-links ul a[href*=’pinterest.com’]:before {
    content: ‘\f231’;
    }
    .social-links ul a[href*=’github.com’]:before {
    content: ‘\f09b’;
    }
    .social-links ul a[href*=’tumblr.com’]:before {
    content: ‘\f173’;
    }
    .social-links ul a[href*=’youtube.com’]:before {
    content: ‘\f167’;
    }
    .social-links ul a[href*=’flickr.com’]:before {
    content: ‘\f16e’;
    }
    .social-links ul a[href*=’vimeo.com’]:before {
    content: ‘\f194’;
    }
    .social-links ul a[href*=’instagram.com’]:before {
    content: ‘\f16d’;
    }
    .social-links ul a[href*=’codepen.io’]:before {
    content: ‘\f1cb’;
    }
    .social-links ul a[href*=’linkedin.com’]:before {
    content: ‘\f0e1’;
    }
    .social-links ul a[href*=’foursquare.com’]:before {
    content: ‘\f180’;
    }
    .social-links ul a[href*=’reddit.com’]:before {
    content: ‘\f1a1’;
    }
    .social-links ul a[href*=’digg.com’]:before {
    content: ‘\f1a6’;
    }
    .social-links ul a[href*=’stumbleupon.com’]:before {
    content: ‘\f1a4’;
    }
    .social-links ul a[href*=’spotify.com’]:before {
    content: ‘\f1a4’;
    }
    .social-links ul a[href*=’twitch.tv’]:before {
    content: ‘\f1e8’;
    }
    .social-links ul a[href*=’dropbox.com’]:before {
    content: ‘\f16b’;
    }
    .social-links ul a[href*=’/feed’]:before {
    content: ‘\f09e’;
    }
    .social-links ul a[href*=’skype’]:before {
    content: ‘\f17e’;
    }
    .social-links ul a[href*=’mailto’]:before {
    content: ‘\f0e0’;
    }

    /* Small menu. */
    .menu-toggle,
    .main-navigation.toggled ul,
    .main-navigation.toggled .social-links {
    display: block;
    margin: 0 auto;
    width: 100%;
    }
    .menu-toggle {
    font-size: 18px;
    }
    .menu-toggle:before {
    content: “\f0c9”;
    display: inline-block;
    font-family: FontAwesome;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    margin-top: -2px;
    margin-right: 5px;
    position: relative;
    top: -1px;
    text-decoration: none;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    }
    .site-main .comment-navigation,
    .site-main .posts-navigation,
    .site-main .post-navigation {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    color: #495762;
    font-family: Montserrat, Tahoma, sans-serif;
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 1.6em;
    padding: .8em 0;
    overflow: hidden;
    }

    .meta-nav {
    display: block;
    font-size: 12px;
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
    }

    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous {
    float: left;
    width: 50%;
    }

    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
    }

    .site-main .comment-navigation a,
    .site-main .posts-navigation a,
    .site-main .post-navigation a {
    color: #495762;
    }

    /*————————————————————–
    # Accessibility
    ————————————————————–*/
    /* Text meant only for screen readers. */
    .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    }

    .screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
    }

    /*————————————————————–
    # Alignments
    ————————————————————–*/
    .alignleft {
    display: inline;
    float: left;
    margin: .8em 1.6em .8em 0;
    }

    .alignright {
    display: inline;
    float: right;
    margin: .8em 0 .8em 1.6em;
    }

    .aligncenter {
    clear: both;
    display: block;
    margin: .8em auto;
    }

    /*————————————————————–
    # Clearings
    ————————————————————–*/
    .clear:before,
    .clear:after,
    .entry-content:before,
    .entry-content:after,
    .comment-content:before,
    .comment-content:after,
    .site-header:before,
    .site-header:after,
    .site-content:before,
    .site-content:after,
    .site-footer:before,
    .site-footer:after,
    .hentry:before,
    .hentry:after {
    content: “”;
    display: table;
    }

    .clear:after,
    .entry-content:after,
    .comment-content:after,
    .site-header:after,
    .site-content:after,
    .site-footer:after,
    .hentry:after {
    clear: both;
    }

    /*————————————————————–
    # Header
    ————————————————————–*/

    .site-branding {
    padding: 3.2em 1.6em;
    position: relative;
    text-align: centre;
    }
    .site-title,
    .site-title a {
    color: #495762;
    line-height: 1;
    margin-top: 0;
    text-decoration: none;
    }
    .site-description {
    font-size: 20px;
    font-weight: bold;
    color: #495762;
    margin-bottom: 0;
    }
    .featured-header-image {
    margin: 0em auto 0;
    text-align: center;
    }
    .featured-header-image img {
    width: 100%;
    height: auto;
    }

    /*————————————————————–
    # Widgets
    ————————————————————–*/
    .widget {
    font-size: 13px;
    margin: 0 0 3.2em;
    }

    /* Make sure select elements fit in widgets. */
    .widget select {
    max-width: 100%;
    }

    /* Search widget */
    .widget_search .search-submit {
    display: none;
    }

    /* Calendar widget */

    .widget_calendar td#next {
    text-align: right;
    }
    .widget-title {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    }
    .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .widget ul li {
    margin-top: .8em;
    padding-top: .8em;
    border-top: 1px solid #eee;
    }
    .footer-widgets {
    border-top: 1px solid #eee;
    margin: 1.6em 0;
    padding: 5% 2.5% 0;
    }
    .footer-widgets .widget-area {
    width: 30%;
    margin-right: 5%;
    overflow: hidden;
    float: left;
    }
    .footer-widgets .widget-area:last-of-type {
    margin-right: 0;

    }
    .footer-widgets .social-links li {
    display: inline-block;
    padding-right: 2.5%;
    font-size: 16px;
    }
    .footer-widgets .social-links li:last-of-type {
    padding-right: 0;
    }
    .footer-widgets .social-links li a {
    color: #9da4aa;
    }

    .widget_recent_entries .post-date {
    color: #bbb;
    }

    .widget_recent_comments tr {
    background: transparent;
    border-top: 1px solid #eee;
    }
    .widget_recent_comments td {
    padding-top: .8em !important;
    padding-bottom: .8em !important;
    }

    .widget_authors strong {
    margin-left: 5px;
    }

    .jetpack-display-remote-posts h4 {
    clear: both;
    display: block;
    font-size: 100% !important;
    border-top: 1px solid #eee;
    padding-top: 1.6em !important;
    margin-top: 1.6em !important;
    margin-bottom: .8em !important;
    }
    .jetpack-display-remote-posts img {
    margin-bottom: .8em;
    }
    .jetpack-display-remote-posts p {
    font-size: 100% !important;
    }

    /*————————————————————–
    # Content
    ————————————————————–*/
    /*————————————————————–
    ## Posts and pages
    ————————————————————–*/
    .sticky {
    display: block;
    }

    .hentry {
    margin: 1.6em 0 3.8em;
    }
    .single .hentry,
    .page .hentry {
    margin-bottom: 0;
    }
    .byline,
    .updated:not(.published) {
    display: none;
    }

    .single .byline,
    .group-blog .byline {
    display: inline;
    }

    .page-content,
    .entry-content {
    margin: 1.6em 0 0;
    }
    .entry-summary {
    width: 78%;
    float: right;
    margin-top: -2px;
    }
    .entry-summary p {
    margin: 0;
    }
    .entry-title {
    color: #495762;
    font-size: 38px;
    margin-top: 0;
    text-transform: none;
    }
    .entry-title a {
    color: #495762;
    }
    .entry-footer {
    font-family: Montserrat, Tahoma, sans-serif;
    }
    .entry-meta {
    color: #495762;
    width: 18%;
    float: left;
    font-size: 0.813em;
    }
    .entry-meta a {
    color: #495762;
    }
    .entry-meta > span {
    clear: both;
    display: inline-block;
    width: 100%;
    }
    .page-links {
    clear: both;
    margin: 0 0 1.6em;
    }
    .featured-image {
    width: 100%;
    height: auto;
    margin-bottom: 1.6em;
    }
    .featured-image img {
    width: 100%;
    height: auto;
    }

    /* Single posts */

    .entry-footer {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    clear: both;
    color: #495762;
    display: block;
    font-size: 13px;
    margin: 0 0 1.6em;
    padding: 0.8em 0;
    text-transform: uppercase;
    }
    .entry-footer a {
    color: #495762;
    }
    .entry-footer-wrapper {
    float: left;
    max-width: 85%;
    }
    .entry-footer-wrapper > span,
    .entry-footer .edit-link {
    display: inline-block;
    margin-right: 1.6em;
    }
    .entry-footer-wrapper > span:before,
    .entry-footer .edit-link:before,
    .comment-reply-link:before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: 14px;
    font-weight: normal;
    margin-top: -2px;
    margin-right: 7px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    }
    .entry-footer .tags-links:before {
    content: “\f02b”;
    }
    .entry-footer .cat-links:before {
    content: “\f07c”;
    }
    .entry-footer .byline:before {
    content: “\f007”;
    }
    .entry-footer .posted-on:before {
    content: “\f017”;
    }
    .entry-footer .edit-link:before,
    .comment-list .edit-link:before {
    content: “\f040”;
    }
    .comment-reply-link:before {
    content: “\f086”;
    }
    .entry-footer .edit-link {
    float: right;
    margin-right: 0;
    }
    .page-header {
    border-bottom: 1px solid #eee;
    margin: 5% 0;
    padding-bottom: .8em;
    }
    .page-title {
    font-size: 28px;
    }

    /*————————————————————–
    ## Comments
    ————————————————————–*/
    .comment-content a {
    word-wrap: break-word;
    }
    .bypostauthor {
    display: block;
    }
    .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .comment-body {
    border-top: 1px solid #eee;
    margin-top: 1.6em;
    padding-top: 1.6em;
    }
    .comment-list .children {
    list-style: none;
    margin-left: 1.6em;
    padding: 0;
    }
    .comment-author {
    padding-top: 1.6em;
    }
    .says {
    display: none;
    }
    .comment-metadata {
    font-size: 13px;
    }
    .comment-metadata a {
    font-weight: normal;
    }
    .comment .edit-link {
    margin-left: .8em;
    }
    .comment-list .avatar {
    float: left;
    margin-right: 1.6em;
    margin-top: -.8em;
    border-radius: 50%;
    }
    .comment-reply-link {
    margin-left: .8em;
    }
    .comment-content {
    clear: both;
    }
    .comments-title {
    font-size: 31px;
    }
    .no-comments {
    margin: 1.6em auto;
    text-align: center;
    }
    .comment-respond {
    border-top: 1px solid #eee;
    margin-top: 1.6em;
    }
    .form-allowed-tags,
    .form-allowed-tags code {
    font-size: 90%;
    }

    /*————————————————————–
    # Infinite scroll
    ————————————————————–*/
    /* Globally hidden elements when Infinite Scroll is supported and in use. */
    .infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
    .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
    display: none;
    }

    /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
    .infinity-end.neverending .site-footer {
    display: block;
    }

    #infinite-handle span {
    border: 0;
    background: #eee;
    color: inherit;
    font-family: Montserrat, Tahoma, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 15px 1.6em;
    text-align: center;
    text-transform: uppercase;
    transition: 0.2s;
    }
    #infinite-handle span:hover {
    background-color: #ccd4db;
    }

    /*————————————————————–
    # Media
    ————————————————————–*/
    .page-content .wp-smiley,
    .entry-content .wp-smiley,
    .comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    }

    /* Make sure embeds and iframes fit their containers. */
    embed,
    iframe,
    object {
    max-width: 100%;
    }

    /*————————————————————–
    ## Captions
    ————————————————————–*/
    .wp-caption {
    margin-bottom: 1.6em;
    max-width: 100%;
    }

    .wp-caption img[class*=”wp-image-“] {
    display: block;
    margin: 0 auto;
    }

    .wp-caption-text {
    font-size: 13px;
    text-align: center;
    }

    .wp-caption .wp-caption-text {
    margin: 0.8075em 0;
    }

    /*————————————————————–
    ## Galleries
    ————————————————————–*/
    .gallery {
    margin-bottom: 1.6em;
    }

    .gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    }

    .gallery-columns-2 .gallery-item {
    max-width: 50%;
    }

    .gallery-columns-3 .gallery-item {
    max-width: 33.33%;
    }

    .gallery-columns-4 .gallery-item {
    max-width: 25%;
    }

    .gallery-columns-5 .gallery-item {
    max-width: 20%;
    }

    .gallery-columns-6 .gallery-item {
    max-width: 16.66%;
    }

    .gallery-columns-7 .gallery-item {
    max-width: 14.28%;
    }

    .gallery-columns-8 .gallery-item {
    max-width: 12.5%;
    }

    .gallery-columns-9 .gallery-item {
    max-width: 11.11%;
    }

    .gallery-caption {
    display: block;
    }

    /*=Layout
    —————————————————————————*/

    .site-content {
    border-top: 1px solid #eee;
    margin: 0 auto 0em;
    padding: 0em 0% 0;
    }
    .site-main {
    float: none;
    padding-left: 30;
    width: 70%;
    }
    .page-template-nosidebar-page-php .site-main {
    float: none;
    margin-left: auto;
    margin-right: auto;
    }
    .sidebar-left {
    margin-top: 0em;
    margin-left: 0%;
    overflow: hidden;
    width: 0%;
    float: left;
    }
    .sidebar-right {
    margin-top: 0em;
    margin-left: 0%;
    overflow: hidden;
    width: 0%;
    float: right;
    }
    .site-info {
    border-top: 1px solid #eee;
    font-size: 13px;
    font-style: italic;
    margin: 1.6em 0 0;
    padding: 2.5%;
    text-align: center;
    }
    .site-info a {
    font-weight: normal;
    }

    /*=Media Queries
    —————————————————————————*/

    @media screen and (min-width: 1101px) and (max-width: 1200px) {
    .entry-summary {
    width: 100%;
    }
    .entry-meta {
    margin-top: 1.6em;
    width: 100%;
    }
    .entry-meta > span {
    display: inline-block;
    padding-right: .8em;
    width: auto;
    }
    .entry-meta > span:last-of-type {
    padding-right: 0;
    }
    }

    @media screen and (max-width: 1100px) {
    .site-main {
    width: 71.5%;
    }
    .sidebar-left {
    width: 24%;
    }
    .sidebar-right {
    clear: both;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    }
    .sidebar-right .widget {
    width: 30%;
    margin-right: 5%;
    float: left;
    }
    .sidebar-right .widget:nth-of-type(3n+1) {
    clear: left;
    }
    .sidebar-right .widget:nth-of-type(3n) {
    clear: right;
    margin-right: 0;
    }
    }

    @media screen and (min-width: 751px) and (max-width: 950px) {
    .hentry {
    margin: 10% 0;
    }
    .entry-summary {
    width: 100%;
    }
    .entry-meta {
    margin-top: 1.6em;
    width: 100%;
    }
    .entry-meta > span {
    display: inline-block;
    padding-right: 1.6em;
    width: auto;
    }
    .entry-meta > span:last-of-type {
    padding-right: 0;
    }
    .entry-meta ul li {
    display: inline-block;
    padding-right: 15px;
    }
    .entry-meta ul li:last-of-type {
    padding-right: 0;
    }
    }

    @media screen and (max-width: 750px) {
    .site-main {
    width: 100%;
    }
    .sidebar-left {
    clear: both;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    }
    .sidebar-right .widget:nth-of-type(3n+1) {
    clear: none;
    }
    .sidebar-right .widget:nth-of-type(3n) {
    clear: none;
    margin-right: 4%;
    }
    .sidebar-left .widget,
    .sidebar-right .widget {
    width: 48%;
    margin-right: 4%;
    float: left;
    }
    .sidebar-left .widget:nth-of-type(2n+1),
    .sidebar-right .widget:nth-of-type(2n+1) {
    clear: left;
    }
    .sidebar-left .widget:nth-of-type(2n),
    .sidebar-right .widget:nth-of-type(2n) {
    clear: right;
    margin-right: 0;
    }
    .footer-widgets .widget-area {
    width: 48%;
    margin-right: 4%;
    }
    .footer-widgets .widget-area:nth-of-type(2n) {
    clear: right;
    margin-right: 0;
    }
    .site-main .comment-navigation,
    .site-main .posts-navigation,
    .site-main .post-navigation {
    font-size: 18px;
    }
    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous {
    border-bottom: 1px solid #eee;
    clear: both;
    float: none;
    margin-bottom: .8em;
    padding-bottom: .8em;
    width: 100%;
    }
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
    clear: both;
    float: none;
    text-align: right;
    width: 100%;
    }
    }
    @media screen and (max-width: 650px) {
    .hentry {
    margin: 10% 0;
    }
    .entry-summary {
    width: 100%;
    }
    .entry-meta {
    margin-top: 1.6em;
    width: 100%;
    }
    .entry-meta > span {
    display: inline-block;
    padding-right: 1.6em;
    width: auto;
    }
    .entry-meta > span:last-of-type {
    padding-right: 0;
    }
    .entry-footer-wrapper > span,
    .entry-footer .edit-link {
    clear: both;
    display: block;
    float: none;
    margin-right: 0;
    margin-bottom: .8em;
    width: 100%;
    }
    .entry-footer {
    padding-bottom: 0;
    }
    .single .byline,
    .single .group-blog .byline {
    display: block;
    }

    h1 {
    text-transform: uppercase;
    font-size: 38px;
    }
    h2 {
    margin-bottom: 15px;
    font-size: 28px;
    }
    h3 {
    font-size: 24px;
    }
    h4 {
    font-size: 16px;
    }
    h5 {
    font-size: 13px;
    text-transform: uppercase;
    }
    h6 {
    font-size: 12px;
    text-transform: uppercase;
    }
    .entry-title {
    font-size: 28px;
    }
    }

    @media screen and (max-width: 550px) {
    .site-content,
    .footer-widgets,
    .site-info {
    padding-left: 5%;
    padding-right: 5%;
    }
    .sidebar-left .widget,
    .sidebar-right .widget,
    .footer-widgets .widget {
    width: 100%;
    }
    .social-links {
    float: left;
    margin-top: .8em;
    }
    .entry-meta {
    margin-top: 1.6em;
    width: 100%;
    }
    .entry-meta > span {
    display: inline-block;
    padding-right: 1.6em;
    width: auto;
    }
    .entry-meta > span:last-of-type {
    padding-right: 0;
    }
    .entry-footer > span {
    display: block;
    clear: both;
    float: none;
    }
    .footer-widgets .widget-area {
    width: 100%;
    margin-right: auto;
    }
    }
    @media screen and (max-width: 37.5em) {
    .main-navigation {
    padding: 0;
    }
    .main-navigation > div:first-of-type {
    float: none;
    }
    .main-navigation > div:first-of-type a,
    .main-navigation ul ul a {
    border-top: 1px solid #eee;
    padding: 1.25em;
    width: 100%;
    }
    .main-navigation > div:first-of-type ul ul a {
    padding-left: 2.05em;
    }
    .main-navigation > div:first-of-type ul ul ul a {
    padding-left: 2.85em;
    }
    .main-navigation > div:first-of-type ul ul ul ul a {
    padding-left: 3.65em;
    }
    .main-navigation ul li.menu-item-has-children > a:after,
    .main-navigation ul li.page_item_has_children > a:after,
    .main-navigation ul ul li.menu-item-has-children > a:after,
    .main-navigation ul ul li.page_item_has_children > a:after {
    display: none;
    }
    .main-navigation > div:first-of-type li {
    clear: both;
    float: none;
    padding: 0;
    width: 100%;
    }
    .main-navigation ul ul,
    .main-navigation ul ul ul,
    .main-navigation ul ul ul ul {
    border: 0;
    clear: both;
    display: block;
    padding: 0;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    }
    .main-navigation ul ul li:hover > ul,
    .main-navigation ul ul li.focus > ul {
    left: auto;
    }
    .social-links {
    clear: both;
    border-top: 1px solid #eee;
    padding: .8em 1.6em;
    width: 100%;
    }
    }
    @media screen and (min-width: 37.5em) {
    .menu-toggle {
    display: none;
    }
    .main-navigation ul,
    .social-links {
    display: block;
    }
    }

    if nothing happen it is because the css selector is wrong.
    check how it works here:
    https://www.w3schools.com/cssref/css_selectors.asp

    but looking your code i found the error:

    .site-main {
    float: none;
    padding-left: 30;
    width: 70%;
    }

    it should be 30% instead 30

    Hey there,

    Just took a quick look at the CSS and it seems that under your ‘Layouts’ section – towards the end – your padding-left is missing a ‘%’. Could that be it?

    Ha – Sorry! Seems like Tiago found it while I was still combing through! ??

    Thread Starter spinzero

    (@spinzero)

    Thank you Tiago & redrambles…I really appreciate you taking the time to help me find a solution.

    You were both right; adding the ‘%’ has given my blog page the centre justification I was after!

    https://laurencehamiltonsmith.com/blog/

    However, it has also caused a 30% offset on all the other pages (which were previously fine);

    https://laurencehamiltonsmith.com/donate/

    Two steps forward, one step back :).

    Try this:

    .blog .site-main {
    float: none;
    padding-left: 30%;
    width: 70%;
    }

    In theory – it should target only the blog page.

    Thread Starter spinzero

    (@spinzero)

    Thank you so much redrambles…between you and Tiago, I now have the website I was hoping for ??

    Thread Starter spinzero

    (@spinzero)

    *Edit – almost….

    https://laurencehamiltonsmith.com/test-upload-2-2/

    What code do I use in place of;

    .blog .site-main {
    float: none;
    padding-left: 30%;
    width: 70%;
    }

    …so that I can get the same formatting on individual posts?

    (Thank you so much for taking the time to help)

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘I LOVE this theme….however, I'd love it even more if…’ is closed to new replies.