Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Inserting custom <ul> and <li> tags for left column widget only


  #1  
Old Jan 15, 2010, 12:27 AM
recipemagician
 
8 posts · Jan 2010
Hi guys! I have found your theme recently and I am really amazed of the power of all the settings. However I am sure it is not something new for you, so I will go directly to the point.

My problem is that I am trying to insert an Accordeon Menu using jquery on Wordpress 2.9.1 and Atahualpa 3.4.51. My website is http://gnm-bg.com. As you can see, the menu is inserted smoothly using the simple text widget and adding my own code. However I have a problem with the definitions of the <ul> and <li> tags in the style as the officially defined ones are applied but not my personaly added. I have read about the recent changes for the styles in the widget (div.widget ul, div.textwidget) and I am sure that there is something I am missing here, so any help will be really appreciated.

I have had a solution to my problem by setting Widget list items in the different levels to have margin, width and padding = 0, however in this case the right block is not appearing as before (the grey rectangular is gone).

So my question is how can I insert an html in the widget and if I need to use different styles for my <ul> and <li> how to define them without interfeering with the other blocks/widgets?

To see my problem you better click on one of the expandible menus. It is written in red color. My problem is the same gray rectangular and the space after it.

Thank you in advance for your amazing work. As soon as I have my funds organized I will pay back all the help.
  #2  
Old Jan 15, 2010, 05:52 AM
juggledad's Avatar
juggledad
 
23,600 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
see if this will help. go to ATO->Style WIDGETS->Widget List Items, and change the 'Left Border Width for Links' to 0. Do the same thing for 'Widget List Items, 2nd level' and 'Widget List Items, 3rd and lower level'. This will remove the left border which showed up as the bar next to each item.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 15, 2010, 08:25 AM
recipemagician
 
8 posts · Jan 2010
Juggledad, as I have wrote, this helps to remove the spacing from the menu, however brings two other problems: the menu width is messed up and is applied only till the last letter but not to the defined width, and the right column widget with the links have the standard Atahualpa theme menu styling not applied because of the 0 margins and paddings that I have set. This was the first thing I have tried and I was happy to see the results, however the happyness last few seconds only.

This is the reason why I need to insert my own <ul> and <li> tags into the test widget, that will not interfere with the previously defined ones in the theme.

The code for the menu is:

HTML Code:
<link rel="stylesheet" type="text/css" href="http://gnm-bg.com/wp-content/themes/atahualpa/js/menustyle.css"> 

<div class="arrowsidemenu">

<div><a href="#" title="Home">Начало</a></div>

<div><a href="#" title="Bio"> Биография на д-р Хамер</a></div>

<div class="menuheaders"><a href="#" title="Laws"> Закони на ГНМ</a></div>
	<ul class="menucontents">
	<li><a href="#">Първи биологичен закон</a></li>
	<li><a href="#">Втори биологичен закон</a></li>
	<li><a href="#">Трети биологичен закон</a></li>
	<li><a href="#">Четвърти биологичен закон</a></li>
	<li><a href="#">Пети биологичен закон</a></li>
	</ul>
Of course this is just a part of the menu but it will be enough for me to apply it to the rest of the menu if you have a solutions and other suggestions.

So how to apply this code to your suggested div.widget ul, div.textwidget

Thanks for your fast reply anyway and wish you to have a smooth and relaxing day.
  #4  
Old Jan 16, 2010, 06:05 AM
juggledad's Avatar
juggledad
 
23,600 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
change the menu CSS and add !imoprant at the end of each item this will cause these to have the most importance
HTML Code:
<style type="text/css">

.arrowsidemenu{
	width: 180px !important; /*width of menu*/
	border-style: solid solid none solid !important;
	border-color: #94AA74 !important;
	border-size: 1px !important;
	border-width: 1px !important;
}
	
.arrowsidemenu div a{ /*header bar links*/
	font: bold 11px Verdana, Arial, Helvetica, sans-serif !important;
	display: block !important;
	background: transparent url(http://gnm-bg.com/wp-content/themes/atahualpa/js/arrowgreen.gif) 100% 0 !important;
    height: 18px !important; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/
	padding: 4px 0 4px 10px !important;
	line-height: 20px !important; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/
	text-decoration: none !important;
}
	
.arrowsidemenu div a:link, .arrowsidemenu div a:visited{
	color: #26370A !important;
}

.arrowsidemenu div a:hover{
	background-position: 100% -32px !important;
}

.arrowsidemenu div.unselected a{ /*header that's currently not selected*/
	color: #6F3700 !important;
}

	
.arrowsidemenu div.selected a{ /*header that's currently selected*/
	color: blue !important;
	background-position: 100% -64px !important;
}
.arrowsidemenu ul{
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.arrowsidemenu ul li{
	list-style-type: none !important;
	border-bottom: 1px solid #9999FF !important;
}
.arrowsidemenu ul li a{ /*sub menu links*/
	display: block !important;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif !important;
	text-decoration: none !important;
	color: black !important;
	padding: 5px 0 !important;
	padding-left: 10px !important;
	border-left: 10px double #9999FF !important;
}
.arrowsidemenu ul li a:hover{
	background: #CCCCFF !important;
}


</style>
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jan 16, 2010, 04:29 PM
recipemagician
 
8 posts · Jan 2010
Well thanks for this solution too, however this does not work with the both blocks again. If I set it with !important, and set the widget lines settings back to the defaults, you can see the result. It is again the menu + the grey bar in front (which is the default style for the right column widgets).

So any other propositions, I know the solution is simple, however I just need to find it. Thank you as always for your time, as it means a lot to me.

Best regards and great day!
  #6  
Old Jan 16, 2010, 07:25 PM
recipemagician
 
8 posts · Jan 2010
Is there anyway to use substyle of ul.mystile or something? I am sorry if this sounds a bit dumb as I am really not much in to css yet...
  #7  
Old Jan 17, 2010, 12:20 PM
recipemagician
 
8 posts · Jan 2010
I think I could easily escape from the <ul> and <li> tags by modifying another menu source, however I would love to have exactly this menu style and it is interesting to have a solution of the following problem for future refference.
  #8  
Old Jan 18, 2010, 09:25 PM
recipemagician
 
8 posts · Jan 2010
Anybody with ideas how to fix this issue?
  #9  
Old Jan 21, 2010, 08:21 AM
recipemagician
 
8 posts · Jan 2010
Common guys, there got to be a solution. Help me out please?
  #10  
Old Jan 26, 2010, 04:14 AM
recipemagician
 
8 posts · Jan 2010
Well I guess the support is sleeping so I will have to find another ways on my own. Well what can we do when there is no one good soul willing to help in such matter. Anyway thanks for all the previous unsuccessful tries...

Bookmarks

Tags
<li>, <ul>, differend, widget

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] custom order of cats and tags jankph Post-Kicker, -Byline & -Footer 9 Apr 2, 2012 04:01 PM
Print my screen shoves the middle content into the left column doctorrobert Atahualpa 3 Wordpress theme 5 Sep 7, 2010 06:06 PM
[SOLVED] Tags Widget... designer666 Sidebars & Widgets 2 Jun 17, 2009 09:14 AM
Custom Header - Inserting HTML table and links over header. hotsauce Header configuration & styling 2 Apr 9, 2009 06:56 AM
[SOLVED] Inserting Java (video) script so it stays in the middle column....help UmpireBugsy Atahualpa 3 Wordpress theme 2 Feb 12, 2009 09:47 PM


All times are GMT -6. The time now is 09:50 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.