Store
Community Documentation

v3 Knowledgebase

Blog Index CSS Edit ( Thought Bubbles )

** This is a personal item and not supported by phpfox **

Change the design of your blog's index page by adding this code to your styles custom.css file

very simple and easy way to redesign your blogs index page to represent thought bubbles.
the source for this css code can be found here along with other similar speech bubbles.

to add this edit simply add the following code to the very bottom of your themes custom.css file , save and clear your cache


/** blog thought bubble edits **/

#js_controller_blog_index  div.row_title {
text-align: center;
}

#js_controller_blog_index div.row_title_info {
position: relative;
padding: 10px 60px;
margin: 10px 10px 80px 45px;
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
-webkit-box-shadow: 0 0 2px #000;
-moz-box-shadow: 0 0 2px #000;
box-shadow: 0 0 2px #000;
color: #575544;
font-size: 1em;
letter-spacing: .06em;
background-color: #f4f4f4;
}
#js_controller_blog_index div.row_title_info:before {
content: "";
position: absolute;
bottom: -20px;
left: 20px;
width: 15px;
height: 15px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #000;
-moz-box-shadow: 0 0 2px #000;
box-shadow: 0 0 2px #000;
background-color: #f4f4f4;
}

#js_controller_blog_index div.row_title_info:before {
content: "";
position: absolute;
bottom: -20px;
left: 20px;
width: 15px;
height: 15px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #000;
-moz-box-shadow: 0 0 2px #000;
box-shadow: 0 0 2px #000;
background-color: #f4f4f4;
}

#js_controller_blog_index div.row_title_info:after {
content: "";
position: absolute;
bottom: -30px;
left: 0;
width: 7px;
height: 7px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0 0 2px #000;
-moz-box-shadow: 0 0 2px #000;
box-shadow: 0 0 2px #000;
background-color: #f4f4f4;
}

#js_controller_blog_index div.row_title_image {
position: absolute;
width: 54px;
text-align: center;
left: 0;
border: 1px transparent solid;
padding: 2px 0px 5px 0px;
bottom: -80px;
}

#js_controller_blog_index  .js_feed_comment_border {
position: absolute;
}

#js_controller_blog_index   .parent_item_feed .js_feed_comment_border, .item_view .js_feed_comment_border {
border-top: 1px rgba(223, 223, 223, 0) solid;
}



attempts have been made to isolate this code to only the blog index page by the use of " #js_controller_blog_index " at the fore of all elements
this code however has not been widely tested
compatibility should be ok for all versions being only a css edit
this also has not been widely tested

Default

blog.png

Nebula

Blogs nebula.png

Cosmic

Blogs cosmic.png