Community Forums › Forums › Archived Forums › Design Tips and Tricks › Css section arrow
- This topic has 16 replies, 2 voices, and was last updated 10 years, 7 months ago by
RobG.
-
AuthorPosts
-
June 18, 2014 at 2:21 pm #110409
RobG
MemberHello 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/robgossJune 18, 2014 at 4:44 pm #110430Brad Dalton
ParticipantHi Rob
I wrote about this a while ago where you can see how its done using CSS. http://wpsites.net/web-design/testimonials-category-archive-page-template-for-genesis/
June 18, 2014 at 5:04 pm #110437RobG
MemberHi 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/robgossJune 18, 2014 at 6:36 pm #110452Brad Dalton
ParticipantIf 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/
June 18, 2014 at 6:43 pm #110453RobG
MemberThanks 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/robgossJune 19, 2014 at 2:47 pm #110649RobG
MemberHi 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/robgossJune 19, 2014 at 4:51 pm #110663Brad Dalton
ParticipantWhat class are you using Rob?
The CSS code on my site generates exactly what you see in the screenshots.
June 19, 2014 at 4:57 pm #110666RobG
MemberThanks 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/robgossJune 19, 2014 at 5:03 pm #110670Brad Dalton
ParticipantYou 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.
June 19, 2014 at 5:23 pm #110676RobG
MemberI 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/robgossJune 19, 2014 at 6:22 pm #110693Brad Dalton
Participant.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;
}
June 19, 2014 at 6:32 pm #110695RobG
MemberLooks 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/robgossJune 20, 2014 at 3:36 pm #110845RobG
MemberHi 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/robgossJune 20, 2014 at 3:53 pm #110848Brad Dalton
ParticipantWell the arrow image is blue which you can easily change or change the hex color code in the CSS.
June 20, 2014 at 3:55 pm #110850RobG
MemberI 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/robgossJune 20, 2014 at 4:13 pm #110854Brad Dalton
ParticipantHello Rob
As previously indicated, i did find CSS coding errors in your style sheet which i think needs cleaning up.
I would also use the CSS version of the code which i tested on your site and know works perfectly as shown in the screenshot above.
June 20, 2014 at 4:18 pm #110855RobG
MemberHi Brad how can I clean up my CSS if you don't mind me asking? I would love to learn more about things like this. thanks for sharing any tips
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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.