Css section arrow

Community Forums Forums Design Tips and Tricks Css section arrow

This topic is: not resolved

This topic contains 16 replies, has 2 voices, and was last updated by  RobG 5 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #110409

    RobG
    Participant
    Post count: 1055

    Hello everyone, I was wondering what would be the best way to implement this css style in to my theme as this website has http://www.emilywhitedesigns.com/ If you can see they have a red widget section and a red arrow to divide the section.

    I know StudioPress used this method on their old website. Thanks so much for any help


    To speed up the process please post the link to the website in question.

    We recommend using Firebug to view source codes http://getfirebug.com/

    RobGoss WordPress Developer
    We build WordPress websites for your business or personal goals
    http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

    • This topic was modified 5 months, 1 week ago by  RobG.
    • This topic was modified 5 months, 1 week ago by  RobG.
    #110430

    braddalton
    Participant
    Post count: 10575
    #110437

    RobG
    Participant
    Post count: 1055

    Hi Brad, Thanks so much I’ll take a look now I should have known you wrote about this:)

    Brad can this be added to my home page widgets sections? It looks like it refers to post and pages.


    To speed up the process please post the link to the website in question.

    We recommend using Firebug to view source codes http://getfirebug.com/

    RobGoss WordPress Developer
    We build WordPress websites for your business or personal goals
    http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

    • This reply was modified 5 months, 1 week ago by  RobG.
    • This reply was modified 5 months, 1 week ago by  RobG.
    • This reply was modified 5 months, 1 week ago by  RobG.
    • This reply was modified 5 months, 1 week ago by  RobG.
    #110452

    braddalton
    Participant
    Post count: 10575

    If you get stuck with that Rob, here’s 2 solutions you will find very easy to implement in your theme. http://wpsites.net/web-design/2-ways-to-create-a-down-triangle-like-arrow-arrow-after-any-div-class/


    #110453

    RobG
    Participant
    Post count: 1055

    Thanks so much Brad I’ll try to see if I can get it working on my main page widget section.


    To speed up the process please post the link to the website in question.

    We recommend using Firebug to view source codes http://getfirebug.com/

    RobGoss WordPress Developer
    We build WordPress websites for your business or personal goals
    http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

    #110649

    RobG
    Participant
    Post count: 1055

    Hi Brad I tryed the second method but there’s nothing being added to the widget section am I missing something? Thanks


    To speed up the process please post the link to the website in question.

    We recommend using Firebug to view source codes http://getfirebug.com/

    RobGoss WordPress Developer
    We build WordPress websites for your business or personal goals
    http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

    #110663

    braddalton
    Participant
    Post count: 10575

    What class are you using Rob?

    The CSS code on my site generates exactly what you see in the screenshots.


    #110666

    RobG
    Participant
    Post count: 1055

    Thanks Brad I just copyed the css and added it to mine, Should I have changed anything?

    I tryed widgets but did not work


    To speed up the process please post the link to the website in question.

    We recommend using Firebug to view source codes http://getfirebug.com/

    RobGoss WordPress Developer
    We build WordPress websites for your business or personal goals
    http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

    • This reply was modified 5 months, 1 week ago by  RobG.
    • This reply was modified 5 months, 1 week ago by  RobG.
    #110670

    braddalton
    Participant
    Post count: 10575

    You need to replace .div with the class you want to add the down triangle after.

    In my case its

    .home-widgets-1:after {

    The class will vary for different themes.

    I also noticed your CSS code has errors and closing brackets in the middle of CSS rules.

    I think you’ll find it may not work for you because of the errors.

    If you need help cleaning up your code, you can contact me.


    #110676

    RobG
    Participant
    Post count: 1055

    I added the css but it just placed the arrow at the bottom of my page any ideas what’s wrong. I want it placed at the top and on the first widget section. Thanks Brad


    To speed up the process please post the link to the website in question.

    We recommend using Firebug to view source codes http://getfirebug.com/

    RobGoss WordPress Developer
    We build WordPress websites for your business or personal goals
    http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

    #110693

    braddalton
    Participant
    Post count: 10575

    .home-widgets-1:after {
    border-top: 80px solid #EDEDED;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    content: “”;
    top: 730px;
    position: absolute;
    left: 45%;
    margin-left: -21px;
    width: 0;
    height: 0;
    }


    #110695

    RobG
    Participant
    Post count: 1055

    Looks great Brad I’ll give it a go


    To speed up the process please post the link to the website in question.

    We recommend using Firebug to view source codes http://getfirebug.com/

    RobGoss WordPress Developer
    We build WordPress websites for your business or personal goals
    http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

    #110845

    RobG
    Participant
    Post count: 1055

    Hi Brad I got the awwor to show but below it is showing blue not sure why. Thanks so much


    To speed up the process please post the link to the website in question.

    We recommend using Firebug to view source codes http://getfirebug.com/

    RobGoss WordPress Developer
    We build WordPress websites for your business or personal goals
    http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

    #110848

    braddalton
    Participant
    Post count: 10575

    Well the arrow image is blue which you can easily change or change the hex color code in the CSS.


    #110850

    RobG
    Participant
    Post count: 1055

    I changed the color of the arrow but around it is still blue. Take a look Brad http://www.robgoss.com


    To speed up the process please post the link to the website in question.

    We recommend using Firebug to view source codes http://getfirebug.com/

    RobGoss WordPress Developer
    We build WordPress websites for your business or personal goals
    http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgoss

    • This reply was modified 5 months, 1 week ago by  RobG.
    • This reply was modified 5 months, 1 week ago by  RobG.
Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.