Css modifications for menu and tags

How to put a background for tags for entire website. Please see image.

 Because tags are difficult to read when they form cluster

How to make dolphins main menu like a instagram search menu.please see image

Hello sureandhraindia!

If you need to change the menu set from the "top" part with the names like "Home", "People", "Chat" an you have the set of the icons, then you would apply the following actions:

1) copy the file templates/base/navigation_menu_mm_item.html file to your template folder (for example templates/tmpl_uni/

2) change the next code:

<a class="top_link" href="__link__"<bx_if:show_onclick> onclick="__onclick__"</bx_if:show_onclick><bx_if:show_target> target="__target__"</bx_if:show_target>>

    <span class="down bx-def-padding-sec-leftright"<bx_if:show_style> style="__style__"</bx_if:show_style>><bx_if:show_picture><img src="__src__" /></bx_if:show_picture>__text__</span>

    </a>

to the following one

<div class="{some you class for the backgroundpicture}" style="background-image: url('__src__');"?>

<a class="top_link" href="__link__"<bx_if:show_onclick> onclick="__onclick__"</bx_if:show_onclick><bx_if:show_target> target="__target__"</bx_if:show_target>>

    <span class="down bx-def-padding-sec-leftright"<bx_if:show_style> style="__style__"</bx_if:show_style>__text__</span>

    </a>

</div>

3) then add css rules for {some you class for the backgroundpicture} to the file templates/tmpl_uni/css/top_manu.css. In the first zoom it will look like:

width: 100%;

max-width: 240px;

height: auto;

where you may set own max-width and other parameters.

!NB - all menu icons should be placed to the folder templates/tmpl_uni/images.

Do All menu icons are required or can I test with few?

What names should be given for icons and size of icons?

Is Home.png is OK?

Thanks.

You may test with the few. And for cases like "Home.png" use the variable __text__.png instead of __src__ in the given code.

 Tried it for evo template.

css class added in the way:

.somebackgroundpicture

{

above attributes

}

cleared cache

But not working. 

Remind me the accesses to your site via PM.

 I have sent, pls check.

Thanks, the image came up.

Pls share details.

Hi all!

The changed idea was in the redeclaration of the method genTopItem of the BxBaseMenu class. It was changed in the templates/tmpl_evo/scripts/BxTemplMenu.php for the correction of the following part:

'bx_if:show_picture' => array(

        'condition' => $sText == '' && $isBold && $sPicture != '',

        'content' => array(

        'src' => getTemplateIcon($sPicture)

        )

        ),

The "condition" element was set to:

'condition' => $sPicture != '',

to use the possibility of the icons setup in the Admin Panel->Settings->Navigation builder (every menu item there has the own "icon" field, which should be placed in the templates/tmpl_***/images/icons area).

After you may change the default templates/tmpl_***/navigation_menu_mm_item.html to this one:

<td class="top"<bx_if:show_active> id="tm_active"</bx_if:show_active> <bx_if:show_picture>style="background-image:url('__src__');"</bx_if:show_picture>>

    <a class="top_link" href="__link__"<bx_if:show_onclick> onclick="__onclick__"</bx_if:show_onclick><bx_if:show_target> target="__target__"</bx_if:show_target>>

    <span class="down bx-def-padding-sec-leftright"<bx_if:show_style> style="__style__"</bx_if:show_style>>__text__</span>

    </a>

    __sub_menus__

</td>

Then you may edit in the templates/tmpl_evo/css/top_menu.css file, the following code for better sizes etc

table.topMenu td {
	height: 80px;
	background-repeat: no-repeat;
	background-size: 100%;
}
table.topMenu a, 
table.topMenu a:link, 
table.topMenu a:visited, 
table.topMenu b {
	height: 80px;
	line-height: 80px; 
	text-transform: uppercase;
	text-shadow: none;
	text-decoration: none;
	font-weight: normal;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
}

Can someone kindly post a screen shot of the final result. I'm not sure if I'm following this thread correctly.

regards

John

Thanks Leonid.

Johnk

Please see the sample menu icon in attachment.

Thanks. Very artistic!

 Please reply this where the thread started.

since the tags look clumsy after event