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

IMG_20180930_111416.jpg · 140.9K · 47 views
IMG_20180930_111329.jpg · 13.8K · 41 views
Quote · 30 Sep 2018

Hello 

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.

Quote · 5 Oct 2018

 

!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.

 

 

Quote · 7 Oct 2018

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

Quote · 8 Oct 2018

 

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. 

Quote · 9 Oct 2018

Remind me the accesses to your site via PM.

Quote · 10 Oct 2018

 

Remind me the accesses to your site via PM.

 I have sent, pls check.

Quote · 13 Oct 2018

Thanks, the image came up.

Pls share details.

Quote · 17 Oct 2018

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);
}
Quote · 24 Oct 2018

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

regards

John

Quote · 24 Oct 2018

Thanks Leonid.

Johnk

Please see the sample menu icon in attachment.

IMG_20181024_190036.jpg · 21K · 21 views
Quote · 24 Oct 2018

Thanks. Very artistic!

Quote · 24 Oct 2018
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.