Dotted divider – Beautiful Pro

[MKEJ]

I am trying to get a dotted divider between the content/blog area and the sidebar area.

I would also like a dotted line above the content/blog and the sidebar.

Just like http://farmpretty.com/

I have been trying to figure this out but with no success.

Any help will be appreciated!

http://farmpretty.com/

[Genesis Developer]

Reference site is using following code

div.site-inner {
    background-image: url("http://farmpretty.com/wp-content/uploads/2013/11/side-bkk.png");
    background-position: 66.5% 0;
    background-repeat: repeat-y;
}

So you will create a dotted image and write the above css (but image path will be your image path) in your style.css file

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Brad Dalton]

Something like this might work

.content {
        border-right: 1px dotted #BCBEC0;
}

---

Tutorials for StudioPress Themes.

[MKEJ]

genwrock, big thank you!

How does http://farmpretty.com/ make the line go away when "minimizing the window"?

[Genesis Developer]

Using media query. See the example:

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1139px) {
div.site-inner{background-image:none !important;}
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[MKEJ]

Sweet! Is it possible to add so it will not show on full-width pages?

[Genesis Developer]

Ahh!!. Yes. right. good question. Add this:

.full-width-content div.site-inner {
  background-image: none;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[MKEJ]

genwrock, thank you! You are my hero!

I am sorry if I am asking too many questions but do you know how to add the dotted line above the content and sidebar?

(Now jumping to twitter to follow you!)

[Genesis Developer]

Can you give your site url?

You can try this

.site-header{
        border-bottom: 1px dotted #BCBEC0;
}

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[MKEJ]

Thank you!

I sent you an email with the site url!

[Genesis Developer]

Yes. I got your mail and checked the site. I am getting the dotted line above the content & sidebar. I think that all are done now right? Please mark the thread as "RESOLVED".

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[MKEJ]

Is it possible to add space between the vertical and horizontal line and also make the horizontal line 1140px wide?

The site url is http://youandme.se/

[Author]

Posts