• violasrose

    (@violasrose)


    Hi, this is my site: https://capturedesign.pro
    I have a few problems with feature page, pls help me:

    1. How do I reorder the heading, image, and text? I saw a snippet about this but it’s in php.
    2. How do I get the heading to the center before the image hovers? Currently, it’s a bit to the left.

    Thanks a lot!

Viewing 11 replies - 1 through 11 (of 11 total)
  • rdellconsulting

    (@rdellconsulting)

    1. The php snippets need to be added to a functions.php in a Child Theme. Very important to get a grasp of CTs if you want to do more customization.

    2. Looks OK to me? Do you mean the Tagline under the logo?

    Thread Starter violasrose

    (@violasrose)

    No, I’m a newbie. I use CSS, that’s why I can’t change it with php code, I mean the 3 feature pages below the slider.

    Thread Starter violasrose

    (@violasrose)

    Also, yes I used a child theme.

    rdellconsulting

    (@rdellconsulting)

    I’ve added some padding:

    .marketing h2 {
      color: #5F9EA0;
      font-family: Garamond;
      font-size: 2.5em;
      font-weight: normal;
      padding-left: 30px;
    }

    rdellconsulting

    (@rdellconsulting)

    Garamond was just an example btw, you can change it to what you want (I hate Garamond!)

    Thread Starter violasrose

    (@violasrose)

    Thanks, but what is that code for?

    My question is about 3 feature pages under slider ??

    1. How do I reorder the heading, image, and text? I saw a snippet about this but it’s in php.
    2. How do I get the heading to the center under each image before the image hovers?

    Also, there is another problem coming up: I use MAC, but the menu is not in the center in bigger screen PC. I used this code to center the logo and menu:

    .site-logo > img {
    margin-left: -5px;
    }
    .navbar-inner {
    position: relative;
    left: -205px;
    top: -10px;

    because the code in snippet “Center Header Block Items” but it doesn’t work.

    Thanks!

    ElectricFeet

    (@electricfeet)

    redellconsulting was giving you some CSS (that you can enter in your Custom CSS panel). .marketing h2 affects the headings on the 3 featured pages. The specific item that makes a big difference is the padding.

    In your “cute-child” theme, you have the following CSS:

    .marketing h2 {
        color: #121F2E;
        font-family: allura;
        font-size: 2em;
        font-weight: normal;
        padding-left: 25px;
    }

    If you remove the padding-left, your headings will shift back in line. Or play with the pixel figure to make it perfect to the eye.

    For your question 1, there is no easy answer. You would need php, I think. Or maybe you could cheat and restyle the heading to be paragraph-sized and restyle the text to be heading-sized.

    Thread Starter violasrose

    (@violasrose)

    Ok, thanks a lot. What about my problem with the heading (logo, menu)?

    It appears perfect center on my MAC 13″ screen but the menu is not in the center in bigger screen PC. I tried the code in snippet “Center Header Block Items” but it didn’t work, so I currently use this code to center the logo and menu:

    .site-logo > img {
    margin-left: -5px;
    }
    .navbar-inner {
    position: relative;
    left: -205px;
    top: -10px;

    ElectricFeet

    (@electricfeet)

    To be honest, with the image, I would add a little white space on the logo.

    With the navbar-inner changes, you will need to make sure they still work on small screen sizes.

    Thread Starter violasrose

    (@violasrose)

    Hi, thank you ElectricFeet for your suggestion. You mean white space above the logo? Also, can you show me how to make the slider closer to the logo?

    I added text above feature pages by this code:

    add_filter(‘tc_fp_block_display’, ‘content_before_fp’);
    function content_before_fp($html) {
    $before_fp = ‘3D Productions and Interior Design Solutions.
    We work with passion and attention to details, achieveing aesthetic beauty through digital magic. Our latest projects:’; //Put your HTML inside this var
    return $before_fp.$html;
    }
    You can see here: https://capturedesign.pro

    How can I change the font, font size, font color, line height, align to center… and break the text in to 2 lines like this:
    “We work with passion and attention to details, achieveing aesthetic beauty through digital magic.

    Our latest projects:”

    ElectricFeet

    (@electricfeet)

    This site is beginning to look super cool. I love the quote:

    Our page is under construction, so are our web engineering skills.

    ??

    How can I change the font, font size, font color, line height, align to center… and break the text in to 2 lines like this:
    “We work with passion and attention to details, achieveing aesthetic beauty through digital magic.

    Our latest projects:”

    N.B. “achieveing” should be “achieving”

    Answer 1:
    In the single quotes where you currently have '3D Productions ... latest projects:', you can put any html you want. Just make sure you don’t add single quotes that mess up the php. In particular, you could add <p class="myextratext"> ... </p> and style it using that class.

    Answer 2 (which I much prefer):
    Don’t use the code you posted above. Instead:
    – Set up a home page (call it “Home”, for instance) and make it your static home page in Customiz’it
    – Enter your 3D Productions ... latest projects: text in this new page
    – Use this snippet to move your featured pages below this page text. There are various “hooks” you could use; __after_article_container is a likely candidate.
    – Then you can style the text with CSS.

    Answer 2 gives you the full freedom of the WordPress page to add all the text and layout you want. Users will be able to change it easily in the future, while the unchanged php works quietly in the background.
    Answer 1 would mean that users would have to resort to entering text changes in php, with the risks that entails — one missed semi-colon and the site completely breaks.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Feature pages: Change order (CSS) and align heading to center’ is closed to new replies.