WordPress.org

Forums

Responsive
How to place a text instead of a featured image? (11 posts)

  1. Iryna_B
    Member
    Posted 7 months ago #

    Hi,
    I'm changing a featured area. I've already deleted title, subtitle, call to action button and featured image (the one that was on the right).
    After that, on the let side of the featured area, I've inserted a slider and now I want to place a text on the right side instead of the previous featured image. Is is possible to do so?
    Greatly appreciate!

  2. Herbert van-Vliet
    Member
    Posted 7 months ago #

    The featured image was not necessarily just an image, if I remember correctly.
    If you undo that change (= copy it from an original front-page.php file), you can write a text in the Theme Options and have that show.

  3. Iryna_B
    Member
    Posted 7 months ago #

    @remark.no

    Thank you! Now I can paste the text instead of an image! Thanks!
    Is it also possible to setup a border between featured content and featured image? I tried setting it up in CSS by adding border-leftto a featured image, but it doesn't work.

  4. Herbert van-Vliet
    Member
    Posted 7 months ago #

    #featured .col-460 {
        margin-right: 1%;
    }
    #featured-image {
        border-left: 2px solid black;
    }

    I think.

    You'll probably want to hide that left-border for smaller screens again, when the right part moves below the left part.
    Something like

    @media screen and (max-width: 980px) {
        #featured-image {
            border-left: none;
        }
    }
  5. Iryna_B
    Member
    Posted 7 months ago #

    Thank you! I pasted the code into css and it made the border, however it is only 2/3 height of my featured content area. I understand it is set to be the same height as my featured text(former image). So right now they are not equal in height, because my featured text is shorter. How can i make the border the same height as my slider (featured content)?
    And also those 2 featured areas stay too close to the newly created border. How can i make some spacing between them? Again, i tried to play with margin and padding, but doesn't seem to be working.

  6. Herbert van-Vliet
    Member
    Posted 7 months ago #

    You could give #featured-image (?) a min-height.

    If you put your text in a div, you could give that div a padding or margin:

    #featured-image div {
        margin-left: 50px;
    }
  7. Iryna_B
    Member
    Posted 7 months ago #

    Sorry, i'm not very good with codes. Where do i exactly put this code? I put it in css, but it doesn't change anything. How exactly should I modify it and where to put it?

  8. Herbert van-Vliet
    Member
    Posted 7 months ago #

    If you put the css-snippet here: Appearance->Theme Options->CSS Styles, that would be the correct spot.
    It will "target" any div-element inside the element with id 'featured-image'.

    This means you have to make sure a div exists; so instead of just writing "Hello" as your text (Appearance->Theme Options->Home Page->Featured Content, you'll want to write <div>Hello</div>, so that this css-snippet will be applied.

    If you have the option of switching between text and visual mode, like you have for pages and posts, make sure you're in text mode, otherwise the '<div>' will not be interpreted as html and the css will not be useful.

  9. Iryna_B
    Member
    Posted 7 months ago #

    Ok, I did what you've suggested: put code in Appearance->Theme Options->CSS Styles and then added <div> and </div> to my text in featured content and at first it changed spacing between text and border. But after I've added some more lines to my featured text, the border completely disappeared.
    Now, my custom CSS looks like this
    .sub-header-menu {
    display:none;
    }

    #featured .col-460 {
    margin-right: 1%;
    }
    #featured-image div{
    border-left: 2px solid grey;
    margin-left: 50px;
    }

    @media screen and (max-width: 980px) {
    #featured-image {
    border-left: none;
    }
    }
    Adding such small thing as a border is too complicated:(

  10. Herbert van-Vliet
    Member
    Posted 7 months ago #

    The css seems ok, so I would think your '<div>' and '</div>' got lost or damaged somehow.
    Do you have a link to your site?

  11. Iryna_B
    Member
    Posted 7 months ago #

    You know, I looked at Appearance->Theme Options->Home Page->Featured Content and it seemed that I didn't save the '<div>' back then. So, after I've done it now, the border is back again.
    But it kind of looks ugly, so I may want to erase it completely. I'm gonna have to come up with other idea for that section.
    Sorry that you spent your time digging into that!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.