How can I change the width of the left menu that comes with Beez20 template in Joomla 2.5?
This can be done by editing the /templates/beez5/css/position.css file.
Find
.leftbigger
{
width:15%
}
And edit the width:15%
#wrapper2
{
width: 50%;
float:left;
position:relative;
padding-bottom:20px
}
in the same file is probably what you also need to adjust.
Using Firebug or the included development tools within a browser can tell you more here.
Related
<div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">Never</div>
With the HTML listed I am trying to access the dropdown list example on the www.material-UI.com website. I have tried both of the following:
b.div(:text => "Never").click
b.span(:text => "Never").click
But it does not click on the component to open up the rest of the menu. this is my first week using Watir and I need to use it to automate a web app built using React.js and Material-UI. I have been successful with text boxes and scrolling and even clicking on images but menus and lists are proving problematic.
I'm going off of #orde's suggestion that the page in question is http://www.material-ui.com/#/components/dropdown-menu. The solution below worked for me on that page.
To open the entire menu in the "Simple example" section, you can click the button:
b.div(:text, 'Never').parent.button.click
But I'm not sure what issue you were having. Was it that the menu simply wouldn't open, or that you couldn't open the correct menu because there are multiple menus on the page with "Never" in the contents?
If the problem is the latter, then you can specify which part of the page you want to be in by honing in on the section heading. It's a bit more verbose, but
b.span(:text, 'Open Immediate example').parent.parent.parent.parent.parent.buttons[1].click
opens the second "Never" menu on the screen. (Five parents above the "Open Immediate example" text gets you to the entire div, and the second button--which has an index of 1--is the drop-down you want. Changing the text to "Simple example" will open the same menu as my first code sample above.)
The issue is that what you want is nested in multiple text nodes, in this case div tags. So getting an ElementCollection gets both the parent and the child div.
So you can do:
browser.div(text: 'Never').child.click
or
browser.div(text: 'Never', index: 1).click
I have a ModelAdmin which stores images among other things. I can do thumbnails up to a certain size and download them but is there a way to display a larger version of the image while in the CMS admin?
I think if I used the UploadField.ss template and added some custom code in there to display it, it could work however it would then be displayed through the CMS. Does SilverStripe provide an easy way to do this?
You can set the height and width of the upload field preview like that
UploadField::create('Image', 'Bild')
->setPreviewMaxWidth(120)
->setPreviewMaxHeight(120)
->addExtraClass('big-preview');
But the container size seems hardcoded in css so you need to change that too
.big-preview .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview {
height: 120px;
line-height: 120px;
width: 120px;
}
.big-preview .ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info {
margin-left: 135px;
}
I don't know if that's the best way to do it, cause it seems a little bit hacky, but it works.
I want to set icon in sidebar of joomla component backend
JHtmlSidebar::addEntry(JText::_('USERS'),'index.php?option=com_users&view=users',$vName == 'users') is used to create this sidebar
My initial answer was for the menu, see below.
For the sidebar, the easiest answer is probably just adding custom css to the admin-theme. By default there are no classes on the sidebar menu items, but you can use the href-tag with attribute-selectors in css, like this:
/* For each item in the sidebar: */
a[href*="yourview"]{
display: block;
padding: 0 0 0 20px;
background: transparent url(link/to/img.png) 0 0 no-repeat;
}
It is also possible to override the sidebar output by copying the file /layouts/joomla/sidebars/submenu.php to the folder html/layouts/joomla/sidebars/submenu.php, and edit this file to display like you want it. More info is found here.
For the menu: It seems like you can add this to the definition of the administration menu in /administrator/components/com_componentname/componentname.xml, like this:
<administration>
<menu img="link/to/icon.png" >COM_COMPONENTNAME</menu>
<submenu>
<menu link="option=com_componentname&view=aview" view="aview"
img="link/to/other-icon.png" alt="Componentname/Aview">
COM_COMPONENTNAME_TITLE_AVIEW
</menu>
</submenu>
</administration>
If you actually want to hide the texts (not sure if I understood you right), you'll need to add some css to the backend theme, or to your component, to accomplish this. If you need to modify the backup theme, it's probably best to make a copy of the isis-theme, so your changes are not overwritten by joomla updates.
Finally I got Answer of this question
Answer
JHtmlSidebar::addEntry('<span class="dashboard-submenuicon"></span>'.
JText::_('Dashboard'),
'index.php?option=com_mycomponent&view=dashboard',
$vName == 'dashboard'
);
We can write css code like
.dashboard-submenuicon{
background-image:url('your_image_url');
background-repeat: no-repeat;
display: inline-block;
height: 22px;
vertical-align: middle;
width: 22px;
margin-right:5px;
}
You need to be sure to include the CSS for the icon you want to add. If you inspect your links there should be an associated class. Create your component CSS to include the background-image you want to use.
The answer related to the admin menu is for Joomla 2.5 and is related to admin main top menu items, not sidebar items.
I'm moving from FCK editor to CK editor 3.6.3 and the site has a background image, which is appearing in the CK editor. I need to remove this while using the same CSS file for both the general site and the CK editor (to pick up on CSS for the styles dropdown).
I tried setting config.BodyClass to a style with no image - this works on FCK2.x but not the CK3. I also found via google a config.extraCss setting but I don't see it in the docs, and it does not appear to do anything anyway.
Fullpage is off (i.e. editor is not producing <body><head> etc tags))
I've got a workaround by having two CSS files, one for the site and one for CK with a different body style, but there must be a better way?
Thanks,
Kevin
Config section:
config.stylesSet = 'my_styles:/admin/ckeditor/styles_dropdown.js';
config.contentsCss = '/newdesign/style.css';
//config.extraCss = 'body {background: none;background-image: none;}';
config.BodyClass = 'fckbody' ;
CSS section (of the 'main' css file)
body{
margin:0px; padding:0px; background-image:url(/newdesign/site_bg19.jpg); repeat; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#393939;
}
.fckbody {
background-color: white;
background: none;
background-image: none;
text-align:left;
}
The correct name in CKEditor is bodyClass with an initial lower case.
Thought I should post my insight here for my findings. I came across this page while looking for a reason why my CKEditor was showing a background image of my site.
If you CKEditor is showing a background image on the Make a Comment section of a node :
1 - Head to "admin/config/content/wysiwyg"
2 - click edit to the text format for which text format is showing the background image
3 - click the CSS tab drop down
4 - change the Editor CSS to "Editor Default CSS".
Hope this helps someone!
I have problem with tooltips on my magento website, I need to have one tooltip on product page which will show a HTML UL List. I tried some plugins I found but had problems with JQuery as it was disabling other prototype pop up I have on product page.
Im really a newbie at All the types of javascript and hope you experts can help me with this please.
My trigger id for tooltips is #why-to-buy
and the tooltip class in CSS is .why-to-buy-tooltip
can anyone suggest me a prototype or scriptaculous driven simple tooltip which can show HTML please?
Any help is more than welcome.
Thanks in advance.
Typically this can be done in just CSS. To start with there needs to be an anchor;
<a id="why-to-buy" href="#" onclick="return false;">
Why To Buy?
<ul class="why-to-buy-tooltip">
<li>Reason #1</li>
<li>Reason #2</li>
</ul>
</a>
The onclick is to prevent it working as a hyperlink. An anchor is necessary for older IEs to respect the following hover;
#why-to-buy {
position: relative;
}
#why-to-buy .why-to-buy-tooltip {
display: none;
position: absolute;
width: 200px;
height: 200px;
z-index: 100;
}
#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip {
display: block;
}
If you need more info search for and read about "CSS popups". A nice touch is to add some CSS3 transitions - old browsers just ignore them and continue to work as normal.
This type of popup is limited because it is inside an anchor, and anchors cannot contain anchors. If the #why-to-buy element is of another type, such as a DIV, then IE doesn't pick up the :hover pseudoclass. For this special case a bit of JavaScript is needed after all.
$('why-to-buy').observe('mouseenter', function() {
this.addClassName('over');
}).observe('mouseleave', function() {
this.removeClassName('over');
});
Update the last stylesheet rule to include #why-to-buy.over .why-to-buy-tooltip. The bit of JavaScript is rarely needed and can go in /skin/frontend/base/default/js/ie6.js. Or you could encourage browser upgrades and choose not to support old IE at all.
A quick Google searched returned this one, and shows to support HTML:
http://www.nickstakenburg.com/projects/prototip/
It's prototype based so should work well with Magento.