1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to do this in Wordpress ??

Discussion in 'Blogging' started by JabbaTheHutt, May 4, 2016.

  1. JabbaTheHutt

    JabbaTheHutt Regular Member

    Joined:
    May 3, 2016
    Messages:
    206
    Likes Received:
    44
    Location:
    Tatooine
    Could someone tell me how to do this red square inside a Wordpress post or page ? or any free plugins which can do it.




    box.jpg
     
    • Thanks Thanks x 1
  2. TopNotchPR

    TopNotchPR Newbie

    Joined:
    Dec 26, 2015
    Messages:
    31
    Likes Received:
    5
    Occupation:
    PR elite, Affiliate guru
    You can use Frontier Theme plugins. It's free and with it you can do this.
     
    • Thanks Thanks x 1
  3. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    5,176
    Likes Received:
    2,394
    Occupation:
    blog creator
    Location:
    UK
    Quick and easy to do...
    Add a simple css text box to a post


    This is a simple css text box that is good for advertising or alerting your readers to a promotion or a particular point you want to make, you could have a product or service you are selling for example.


    You can position a simple css text box anywhere in a post or page, just add the class to the text and it will highlight it in a styled box.


    In your child theme style sheet add the code below




    .textbox{padding:2px 6px 4px 6px; color: #000; background-color: #fff; border: 1px solid #000;border-bottom:3px solid #000; border-radius:5px;}




    Then in your post or page add this <p class="textbox">ADD YOUR TEXT HERE</p> Change the " ADD YOUR TEXT HERE " to whatever text you want. If you want to add a simple css text box to some existing text then just put <p class="textbox"> before the first word and </p> after the last word of the text you want in the box.
     
    • Thanks Thanks x 3
  4. JabbaTheHutt

    JabbaTheHutt Regular Member

    Joined:
    May 3, 2016
    Messages:
    206
    Likes Received:
    44
    Location:
    Tatooine
    That works great too thank you. How do I add an image along with the text but to stay side by side ?
     
  5. Conor

    Conor Jr. VIP Jr. VIP

    Joined:
    Nov 7, 2012
    Messages:
    3,540
    Likes Received:
    5,858
    Gender:
    Male
    Location:
    South Africa
    Home Page:
    Align the image and text to the left.
     
    • Thanks Thanks x 1
  6. RuthSam

    RuthSam Jr. VIP Jr. VIP Premium Member

    Joined:
    Mar 19, 2010
    Messages:
    3,812
    Likes Received:
    973
    Gender:
    Male
    Home Page:
    You could also use a Theme that has all this build in :)
     
    • Thanks Thanks x 1
  7. alternatesword

    alternatesword Jr. VIP Jr. VIP

    Joined:
    Aug 25, 2012
    Messages:
    2,578
    Likes Received:
    515
    Location:
    scabbard
    Home Page:
    Try the "shortcodes ultimate" free plugin
     
    • Thanks Thanks x 1
  8. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    5,176
    Likes Received:
    2,394
    Occupation:
    blog creator
    Location:
    UK
    Well as outlined above this can be done easily without yet another plugin
     
    • Thanks Thanks x 1
  9. tele9

    tele9 Newbie

    Joined:
    Jun 18, 2013
    Messages:
    26
    Likes Received:
    4
    blogzandstuff is correct, just a simple css will do the trick.
    plugins are not necessary for this.

    you may try digging from w3schools for these type of stuffs
    :)
     
    • Thanks Thanks x 1
  10. alternatesword

    alternatesword Jr. VIP Jr. VIP

    Joined:
    Aug 25, 2012
    Messages:
    2,578
    Likes Received:
    515
    Location:
    scabbard
    Home Page:
    Yeah, but it will useful for someone who don't have any idea about child theme or don't have theme which doesn't have option to include custom css :) and even it has a lot of features not just limited to a red text box.
     
  11. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    5,176
    Likes Received:
    2,394
    Occupation:
    blog creator
    Location:
    UK
    using css you are not limited to a red text box, you can change the background colour, use dotted lines as border etc
     
  12. Visit

    Visit Senior Member

    Joined:
    Mar 11, 2014
    Messages:
    840
    Likes Received:
    305
    Occupation:
    Porn Star
    Location:
    Where that Show The Broen is Located
    Home Page:
    it's funny how most of us have zero clue how to use html/css or whatever crap it is required to make that possible including myself, we just rely on plugins and quick-fixes lol so jokes
     
  13. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    5,176
    Likes Received:
    2,394
    Occupation:
    blog creator
    Location:
    UK
    it's always a good idea to have even a basic understanding. If you a plugin for every little thing then you'll end up with lots of plugins.
    As i outlined above it is really quite easy, you can even copy and paste the code and can see clearly the hex colours to change.
    It's not rocket science!
     
  14. alternatesword

    alternatesword Jr. VIP Jr. VIP

    Joined:
    Aug 25, 2012
    Messages:
    2,578
    Likes Received:
    515
    Location:
    scabbard
    Home Page:
    Actually that plugin also done that via pre coded css but it gives UI to use all the required function on a single click. The suggestion i made is just for people who don't know css, i hope you understand what i'm trying to say :) i don't want to continue this discussion :)
     
    • Thanks Thanks x 1
  15. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    5,176
    Likes Received:
    2,394
    Occupation:
    blog creator
    Location:
    UK
    Conversation considered closed
     
  16. beats4legends

    beats4legends Junior Member

    Joined:
    Jul 29, 2010
    Messages:
    128
    Likes Received:
    35
    Gender:
    Male
    Occupation:
    CEO/Lead Designer
    Location:
    Washington State
    Home Page:
    I think honestly you're going to require a HTTPS server. It sounds like you're on Wordpress.com, and don't have your own hosting, domain name and Wordpress installation. The installation can be found at Wordpress.ORG, but you can do better than that. With a hosting like HostGator there is a QuickInstall function for such things. You can get Wordpress installed very quickly and easily.
     
  17. andrew1991007

    andrew1991007 Jr. VIP Jr. VIP

    Joined:
    Aug 19, 2011
    Messages:
    2,334
    Likes Received:
    350
    Gender:
    Male
    Occupation:
    SEO expert, Designer , Developer
    Location:
    SEO-WORLD
    Home Page:
  18. beats4legends

    beats4legends Junior Member

    Joined:
    Jul 29, 2010
    Messages:
    128
    Likes Received:
    35
    Gender:
    Male
    Occupation:
    CEO/Lead Designer
    Location:
    Washington State
    Home Page:
    Sorry, I actually misunderstood. I thought you were trying to get rid of the box. Okay, so if you want to do a similar box you can do so with code for sure. Google "How to make a colored box html css" in Google. You should find the answer. I would like to post the code here in the comment but somehow I don't like moderators would like it, and may see it as me trying to manipulate the code. You can also just use a theme that does this.
     
  19. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    5,176
    Likes Received:
    2,394
    Occupation:
    blog creator
    Location:
    UK
    Err, bit late to the party there, problem already solved. You should read the thread first before commenting