- This topic has 16 replies, 2 voices, and was last updated 11 years, 5 months ago by
.
-
Posts
-
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/robgossHi 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/
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/robgossIf 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/
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/robgossHi 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/robgossWhat class are you using Rob?
The CSS code on my site generates exactly what you see in the screenshots.
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/robgossYou 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.
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
.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;
}
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/robgossHi 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/robgossWell the arrow image is blue which you can easily change or change the hex color code in the CSS.
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/robgossHello 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.
Hi 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
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.