Sidebar Alignment - Subpage Teaser/Button Alignment

resolved (9 posts) (3 voices)

  1. This should be easy for you guys, but I'm frustrated.

    1) I'm trying to make a fancy button to fit in TEXT Widget in Sidebar on home page. But I can't center the text.

    look in right column: http://www.allankarl.com/keynote_speaker/

    2) I want the button in the Title/Teaser block of subpage to be aligned horizontal with text. However, sometimes I might have one line of text, other times two or three. So not sure if there is a way to do this with CSS -- i'm no CSS'er so help me but here's the way it should look:

    http://www.allankarl.com/keynote_speaker/speaking/keynotes-programs

    And here it's aligned top.
    http://www.allankarl.com/keynote_speaker/sample-page/the-setbacks

    I managed to get the look I want on my home page
    look in right column: http://www.allankarl.com/keynote_speaker/

    when there are three lines of teaser text. Understandably the container where these items "float" changes height by the amount of text in the teaser. So is there a way to let it auto adjust based on the size/amount of text. Or must I adjust CSS for each individual page that the text might be one, two or three lines (good god i hope never more than that!)

    Thanks!

    Posted 3 years ago #
  2. Ruderic
    Support

    Hello,

    Regarding your questions:

    1) So, you want to align the button horizontally, right? I see that you have a text widget with just a button shortcode in it. You can paste this code in the "Custom CSS" field of the theme options panel:

    #text-20 p {
    text-align: center;
    }

    2) Add this other code to the "Custom CSS" field:

    #intro .intro_title {
      margin: 0;
      position: absolute;
      top: 25%;
    }
    #intro .teaser {
      float: right;
      width: 700px;
    }

    Try that and let us know the results.

    Posted 3 years ago #
  3. Ruderic #1 above worked just fine. However, now I have too much space above the button and beneath the text area above it? Where can I adjust this padding?

    But in #2 above by adding the CSS I got this to work right: http://www.allankarl.com/keynote_speaker/sample-page/the-setbacks
    However this page got screwed up: http://www.allankarl.com/keynote_speaker/speaking/keynotes-programs

    Posted 3 years ago #
  4. Ruderic
    Support

    Hello,

    Regarding #1, replace the code that I previously provided with this new one:

    #text-20 p {
    margin: 0 !important;
    text-align: center;
    }
    #text-20 .button_link {
    margin: 0 !important;
    }

    About #2, I am afraid it won't be possible to achieve what you are looking for. I would recommend you to delete the CSS tweak that I wrote, so the theme restores it's default values.

    Posted 3 years ago #
  5. So there is no way to add padding or margin to the top of the button on the teaser text? Thereby pushing it down pixel by pixel to align horizontally with the teaser text?

    http://www.allankarl.com/keynote_speaker/sample-page/the-road-the-journey

    Posted 2 years ago #
  6. Elliott
    Support

    Hello MacMyDay,

    Your wanting to add some margin to the page title? Try this,

    .intro_title { margin-top: 20px !important; }

    If that does not work for you then go ahead and take a screenshot and highlight the element you are having issues with.

    Posted 2 years ago #
  7. this is a global setting for the margin of the page title. Can I customize this on a page by page basis by somehow incorporating a page id?

    Posted 2 years ago #
  8. Elliott
    Support

    If you only want it done on a select few pages then insert this into the page content,

    <style type = 'text/css'>.intro_title { margin-top: 20px !important; }</style>

    Posted 2 years ago #
  9. @Elliott - thanks. will try and make that work.

    Posted 2 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme