Css For Forum Widgets?

[mongo2006]

Has anyone written the CSS to make the forum topic/reply widgets to look like the main widgets for the posts, with such a great template I would have thought it would have already been done.

[sharmstr]

Try this. It was a bit difficult because the bbpress widgets print out different divs. The below will make them look similar to the kleo recent post widget, but things like the date format and username are controlled by the widget itself, not through css

COPY CODE

[id^=bbp].widget li {
	padding-bottom: 10px;
	min-height: 50px;
}
[id^=bbp].widget .bbp-author-name {
	//display: none;
}
[id^=bbp].widget .bbp-author-avatar {
 	clear: both;
 	display: inline-block;
  	float: left;
 	margin-bottom: 5px;
 	margin-right: 10px;
}
[id^=bbp].widget .bbp-author-avatar:empty {
    display: none;
}
[id^=bbp].widget .bbp-author-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 100%;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[mongo2006]

Thank you for your efforts, I put that css in the child’s style.css but it resulted in no visible change to any of the forum widgets. Maybe I wasn’t clear, what I’m trying to achieve is to get the:

BBPRESS
Recent Topics
Forum List
Recent Replies
KLEO
The Custom Menu

Widgets to have the styling and the icon on the left in the same fashion as lets say:

KLEO
Recent Comments
Recent Posts

I’m a bit dated on my css, the only way I know how to do it is with images. I have yet to learn to do it with web icons, if you could show me the css to o that I think I can handle the rest.

[mongo2006]

I was looking on the net and found a way to do it but I’m not sure if the template uses fontawesome it didn’t: seem to work so I guess not.

COPY CODE

#main .sidebar ul li:before {    
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #f00;
}

[sharmstr]

Fontello https://archived.seventhqueen.com/documentation/kleo

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Sorry, first link was missing the anchor https://archived.seventhqueen.com/documentation/kleo#vector-icons

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[mongo2006]

Ok cool headed there now.. I’ve been trying to break this down because it’s an example that in the css of the template right now

COPY CODE

.widget_recent_entries li:before{content:"\e86c";margin-right:10px;margin-left:2px;font-family:"fontello";text-decoration:none}

[sharmstr]

Okay. I see my confusion. I was styling based on the widget called “(Kleo) Recent Posts”. The one with the fontello icons is called “Recent Posts”. Huge difference because the Kleo one uses image thumbnails from the post. Sorry about that.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Let me know if you get stuck and I’ll take another stab at it 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[mongo2006]

Yeh I’m all over the net right now taking crash courses and trying to figure out how to target the li for these widgets but they are un-named, and targeting the class seems to have no reation. even if I go from ul li I get nothing..any help would be appreciated I have set up a test page so you can see my progress.. still trying to finish up the structure http://realty-sos.com/sell-your-house/

[sharmstr]

Yeah, that’s why i used stuff like [id^=bbp] because of the lack of targets. I’m digging into someone elses issue at the moment, but I’ll get back to you.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[mongo2006]

Cool I think I got the icon part, working out the first child issue now on the top of the li’s. Thank you so much for being a sounding board sometimes that all ya need.

[sharmstr]

I went a different route. All that really needs to happen is setting the class name of the widget to “widget_recent_entries” and it will pick up all the styling from the posts widget. So I just copied the widgets code and created a new custom widget.

Attached is forum-widget.txt. If you want to use it, put it in your child theme (change .txt to .php) and call it in your functions.php file.

COPY CODE

require_once( trailingslashit( get_stylesheet_directory() ) . 'whateverdirectoryyouwantinkleo-child/forum-widgets.php' );

Its only for (bbpress) Recent Topics, but you can do the same with the other ones. Just rename the classes and functions by putting custom_ in front of them. And changing

COPY CODE

'classname'   => 'custom_widget_display_topics'

to

COPY CODE

'classname'   => 'widget_recent_entries',

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[sharmstr]

Also, if you dont want to do the custom widget option, you can look at this. Basically all I did was search for ‘widget_recent_entries’ css and copied into my child css and changed the name to widget_display_topics. The only thing that wont work is the colors since those are set dynamically through theme options. So you’ll have to hard code the colors you want. But at the very list it should help with your alignment issues.

COPY CODE

.widget_display_topics {
	padding: 6px 0 16px;
	/*border-bottom-style: solid;
	border-bottom-width: 1px;*/
	list-style: none;
}

.widget_display_topics ul {
    padding-right: 0;
    padding-left: 0;
}

.widget_display_topics li:before {
    margin-left: 10px;
    margin-right: 2px;
}

.sidebar .widget_display_topics li {
	padding: 6px 0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	list-style: none;
}

#footer .widget_display_topics li {
	padding: 6px 0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	list-style: none;
}

.widget_display_topics li:first-child {
	border-top-style: solid;
	border-top-width: 1px;
}

/* Recent entries */
.widget_display_topics ul {
	padding-left: 0;
}
.widget_display_topics li:before { content: "\e86c"; margin-right: 10px; margin-left: 2px; font-family: "fontello"; /*color: #dedede;*/ text-decoration: none; }
.widget_display_topics .post-date { display: block; font-size: 11px; color: #777; margin: 5px 0 0; }

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[mongo2006]

OMG I came back to post what I found for any others that want this and BOOM! all this code.. ok this is what I did.. it looks sick compaired to yours but.. I used

COPY CODE

.widget_display_replies li:before {
	content: "\e86c"!important;
	margin-right: 10px;
	margin-left: 2px;
	font-family: "fontello"!important;
	text-decoration: none;
	color: #C5C5C5;
}

.widget_display_topics li:before {
	content: "\e86c"!important;
	margin-right: 10px;
	margin-left: 2px;
	font-family: "fontello"!important;
	text-decoration: none;
	color: #C0C0C0;
}

.widget_display_views li:before {
	content: "\e86c"!important;
	margin-right: 10px;
	margin-left: 2px;
	font-family: "fontello"!important;
	text-decoration: none;
	color: #C0C0C0;
}

to target the perspective li’s. Because some people get crazy with the forum titles I cet their nutz off with this to make sure the list stays uniform.

COPY CODE

[id^=bbp].widget .widget_display_views li {
        padding-bottom: 0px;
        max-height: 35px;
		border-bottom: 1px solid #e5e5e5;
		overflow:hidden;
		height:35px;
		line-height:100%!important;
}

ok now I have to take a look at what you did.. this is like Christmas I’m all giddy..lol

[mongo2006]

Ok I looked it over, I’m going to do the custom widget option.. gives me a chance to learn something new.. I’ll get this done then jump on the custom Menu and I think I’ll be done with the custom CSS then I can move on to content for the site.

[sharmstr]

For anyone not brave enough to do the custom widget option, here’s the combined css that takes care of it all. You just need to remember to change the colors to suit your theme style.

COPY CODE

/* Forum Widget Styles */
h4.widget-title {
	color:#777777;
}
.widget_display_replies,
.widget_display_views,
.widget_display_topics {
    padding: 6px 0 16px;
    list-style: none;
    color:#777777;
}
 
.widget_display_replies ul,
.widget_display_views ul, 
.widget_display_topics ul {
    padding-right: 0;
    padding-left: 0;
}

.widget_display_replies li:before,
.widget_display_views li:before, 
.widget_display_topics li:before {
    margin-left: 10px;
    margin-right: 2px;
	color: #C0C0C0;
}

.sidebar .widget_display_replies li ,
.sidebar .widget_display_views li ,
.sidebar .widget_display_topics li {
    padding: 6px 0;
    border-bottom: 1px solid #e5e5e5;
    list-style: none;
}

#footer .widget_display_replies li,
#footer .widget_display_views li, 
#footer .widget_display_topics li {
    padding: 6px 0;
    border-bottom: 1px solid #e5e5e5;
    list-style: none;
}

.widget_display_replies li:first-child,
.widget_display_views li:first-child, 
.widget_display_topics li:first-child {
    border-top: 1px solid #e5e5e5;
}
 
/* Recent entries */
.widget_display_replies ul, 
.widget_display_views ul, 
.widget_display_topics ul {
    padding-left: 0;
}
.widget_display_replies li:before, .widget_display_views li:before, .widget_display_topics li:before { content: "\e86c"; margin-right: 10px; margin-left: 2px; font-family: "fontello"; /*color: #dedede;*/ text-decoration: none; }
.widget_display_replies .post-date, .widget_display_views .post-date, .widget_display_topics .post-date { display: block; font-size: 11px; color: #777; margin: 5px 0 0; }

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[mongo2006]

Added a few snips to your footer code because they are questions just waiting be asked lol

COPY CODE

       #footer .widget_display_replies li:first-child,
        #footer .widget_display_views li:first-child,
        #footer .widget_display_topics li:first-child {
        border-top: 1px solid #333;
    }
	
	    #footer  .widget_display_replies li:before,
        #footer .widget_display_views li:before,
        #footer .widget_display_topics li:before {
        margin-left: 10px;
        margin-right: 2px;
        color: #555;
    }
	
    	#footer .widget_display_replies a,
        #footer .widget_display_views a,
        #footer .widget_display_topics a {
	    color: #555!important; 
    }
	
    	#footer .widget_display_replies a:hover,
        #footer .widget_display_views a:hover,
        #footer .widget_display_topics a:hover {
	    color: #555!important; 
    }
	

	

Again if you want to keep the footer clean add this to the css.

COPY CODE

        #footer .widget_display_replies li,
        #footer .widget_display_views li,
        #footer .widget_display_topics li {
        padding: 6px 0;
        border-bottom: 1px solid #333;
        list-style: none;
	max-height: 35px!important;
        overflow:hidden!important;
        height:35px!important;
        line-height:160%!important;
		
    }

Thank you so much sharmstr

[Author]

Posts