Some background: I've converted my designer's Sketch text styles to classes in a css module. For this example, I have a "labels.module.css" file, containing the styles for each type of label in a class name. Here is an excerpt (the #apply comes from tailwind):
.labelNormalLight,
.labelNormalMidGray,
.labelNormal,
.labelNormalWhite
{
#apply font-normal font-sans text-xs leading-3;
}
.labelNormalLight {
#apply text-neutralMediumLight;
}
Now I have an element that I'm using the style .labelNormal on. However, when that element's parent is hovered over, I need to switch the styles to that of .labelNormalLight. For this, I wrote another .module.css file, and attempted to compose the two styles inside it:
.name {
composes: labelNormal from '../styles/labels.module.css';
}
.person:hover .name {
composes: labelNormalLight from '../styles/labels.module.css';
}
This however fails, as CSS Modules do not allow composing except within single local class names, per this error:
Error: composition is only allowed when selector is single :local class name not in ":local(.person):hover :local(.name)"
So my question is: How do I achieve keeping my CSS DRY, but also allow me to override styles based on parent states? I've thought about exporting the values, but then I have to know what values to override.
Update:
So I was able to accomplish this using using Sass's #extend, by specifying %labelNormalLight and extending that. I wasn't able to achieve this with tailwind however, due to me being unable to get tailwind working in Sass. I'd still like to know how to do this without sass though, as it's literally the only reason I'd need it.
Related
In my code I have widgets and change their styles the following way:
resultGroupBox->setStyleSheet("background-color:#7979ec;");
And later in code:
resultGroupBox->setStyleSheet("font: bold 14px\"Verdana\"");//this is done by function (set_fonts());
After the second style is applied the first is lost. I wonder if there is a way to deal with this (I need the both the fonts and the background), except for setting background-color and fonts in the same command.
It looks like your function is "setStyleSheet", isn't there a function to "AddStyle"?
Even better is adding a class instead of a style. For example with the jQuery addClass function. See https://api.jquery.com/addclass/
Is it possible to customise the quick info section in the content editor to show additional information about the item?
Thanks
I think this would be quite tricky. If you look at Sitecore.Shell.Applications.ContentManager.Editor (in Sitecore.Client.dll), you'll see there is a RenderQuickInfo method. The HTML gets pieced together manually and is added to an EditorFormatter object as a literal control. All the classes involved are tightly integrated in to the application - there's no easily identifiable customisation point.
There are some pipelines associated with the rendering of the Content Editor,
renderContentEditor
getContentEditorFields
getContentEditorSkin
But I don't think these will provide an easy way in.
In general, I always think that if Sitecore haven't made part of the application easily customizable, then they probably did it on purpose.
One option could be a more js approach. The whole of the content editor is in the dom, albeit rather nested. It's slightly different but highlights the concept (http://blog.boro2g.co.uk/ever-edited-sitecore-web-db-mistake/).
I'd suggest if you use the example below in anger you make the xpath better - this was simply stolen from chrome dev tools.
As an example: with the following script pasted into the content manager.aspx file you can access some of the elements:
<script type="text/javascript">
window.onload=function(){
var text = getElementByXpath('//*[#id="EditorPanel"]/table/tbody/tr/td/table/tbody/tr[2]/td[1]');
if (text) {
text.innerText = "hi";
} else {
}
};
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
</script>
Which then allows you to update text (see screenshot):
quickinfo says hi
I have this::
FB::DOM::ElementPtr _element=m_host->getDOMWindow()->getDocument()->getBody()->getElementById("plugin0");
I got the element(i.e. object tag of the plugin that i wanted) by ID. It's compiling. I now want to SET its property from the JSAPI side...like border color style and width....
I went through this page . I could find only 1 method "setInnerHtml"...which sets something. What should i pass in its argument...?it has std::string type...so that I can manipulate the plugin's document. Any ideas...
Basically I want to set the attribute of a tag from PluginAPI side.....
Honestly? You'd be much better off putting the plugin in a div at 100%x100% and then managing the border of the div. For something like this I'd probably just use:
m_host->evaluateJavascript("document.getElementById('pluginCont').style.border = '1px solid black';");
That'll be the easiest. You could also look at the DOM abstraction code and add some tools for managing CSS; note that on IE you may need to use special activex methods to do this, which is why I dont' recommend just doing it through getDOMElement() (which is a shorthand, btw, for the long code you have in your example)
i´m developing a theme and for some reason i need to move the default position for breadcrubms (also for many other things) over woocommerce themes. Then i realised to do something like this on my functions.php:
function woocommerce_remove_breadcrumb(){
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);
}
add_action('woocommerce_before_main_content', 'woocommerce_remove_breadcrumb');
function woocommerce_custom_breadcrumb(){
woocommerce_breadcrumb();
}
add_action( 'woo_custom_breadcrumb', 'woocommerce_custom_breadcrumb' );
And then on any template file, output the breadcrumb just with:
<? do_action('woo_custom_breadcrumb'); ?>
And works. My question is more than that. Is this the correct approach for something like this? I mean for anything over woocommerce, not just breadcrumb, for any pice, ratings, titles, buttons, sidebar, and so on.
What i´m thinking on is why woocommerce templates don´t come with more deep code. I mean, why there´s no such a single-content-loop.php template where you can just change the order of things, title, category, content, images, etc. in an easy way rather that hooking into functions?
I think that is an acceptable way to call the breadcrumbs explicitly. Sometimes it is easier to call a specific function than remove everything around it!
As for changing the order of things and getting into advanced customization; there isn't a single file, but a number of files working together. Create a folder in your themes root called 'woocommerce' and copy the following files for a safe override:
woocommerce/woocommerce-hooks.php:
Here are your hooks, including the ones you are overriding in your themes functions.php. Here is where you can experiment with removing and repositioning certain elements on your product page. Search for 'Sidebar' and you will see where the 'woocommerce_sidebar' action is added with the function it references in...
woocommerce/woocommerce-template.php:
Here are the functions used in template files to output content based on conditional statements. For instance, search for the 'Single Product' series and you can see which template files are used for which functions. For instance 'woocommerce_template_single_title' uses 'single-product/title.php' - if you copy over this folder and file you can make very specific edits to just the title section
Between these two files and their accompanying references (like title.php) I believe you can do the things you described. Let me know how it works out! I'm new to woocommerce too!
I am currently trying to understand a bit more about how Orchard handles Lists of Custom Content Types and I have run into a bit of an issue.
I created a Content Type named Story, which has the following parts:
Body
Common
Containable
Route
I created a list that holds these items, and all I am attempting to do is style them in such a way:
Story Title
Story Description (Basically a truncated version of the body?)
However, I cannot seem to figure out how to do the following:
Get the Title to actually appear (Currently all that appears is the body and a more link)
Remove the "more" link (and change this to be the actual Title)
I have looked into changing the Placement.info, and have looked all over in an attempt to find where the "more" link is added in each of the items. Any help would be greatly appreciated.
I finally managed to figure it out - Thanks to the Designer Tools Module, which made it very simple to go look into what was going on behind the scenes during Page Generation.
Basically - all that was necessary to accomplish this was to make some minor changes to the Parts.Common.Body.Summary.cshtml file. (found via ../Core/Common/Views/)
Which initially resembles the following:
#{
[~.ContentItem] contentItem = Model.ContentPart.ContentItem;
string bodyHtml = Model.Html.ToString();
var body = new HtmlString(Html.Excerpt(bodyHtml, 200).ToString()
.Replace(Environment.NewLine,"</p>"+Environment.NewLine+"<p>"));
}
<p>#body #Html.ItemDisplayLink(T("more").ToString(), contentItem)</p>
however by making a few changes (by using the Designer Tools) I change it into the following:
#{
[~.ContentItem] contentItem = Model.ContentPart.ContentItem;
string bodyHtml = Model.Html.ToString();
string title = Model.ContentPart.ContentItem.RoutePart.Title;
string summary = Html.Excerpt(bodyHtml, 100) + "...";
}
<div class='story'>
<p>
#Html.ItemDisplayLink(title, contentItem)
</p>
<summary>
#summary
</summary>
</div>
Although it could easily be shortened a bit - It does make the styling quite a big easier to handle. Anyways - I hope this helps :)
Alternately you can use the placement.info file in your theme assign different fields to your Summary and Detail views. It's much simplier.
http://orchardproject.net/docs/Understanding-placement-info.ashx
But, I used the same method you did till I discovered the .info file as well. It works and gives you a good understanding of how the system works, but the placement.info file seems easier.
Also, you probably don't want to be editing the view files in Core. I think your meant to override views in your theme directory.