I'm using GWT with obfuscated CSS styles (CssResource.style=OBF). For example I get results like <div class="GI1MGL5PID">.
Is there any possbility to manage how the style names are generated? I do not want to disable the obfuscation but add some prefix or so to all classes to get something like <div class="MyApp_GI1MGL5PID">.
You can use this Resources.gwt.xml property to configure the prefix behavior.
<!-- This allows the developer to use shorter obfuscated class names. -->
<!-- Is is valid to extend this property to use a custom name. -->
<define-configuration-property name="CssResource.obfuscationPrefix" is-multi-valued="false" />
<set-configuration-property name="CssResource.obfuscationPrefix" value="default" />
Property value can be:
default, uses a checksum from all types of your app
empty, this generates the most compact result but it might conflict with outer styles (example)
{string}, this string is used as a prefix (example)
Related
I'm working on an app using Vite & Vuejs3 where I'm setting up a conditional class.
In there I've got a tailwind (unocss) class which also is conditionally created with a variable, like so...
:class="[dirHor ? `flex-row bottom-0 left-50% -translate-x-50% mb-6 space-x-${props.bgSize}` : `flex-col right-0 top-50% -translate-y-50% mr-6 space-y-${props.bgSize}`]"
It's the space-x-${props.bgSize} here for example which isn't exported. When you hardcode the variable into the class like space-x-8 it does work.
Seems here that the string literals are correctly implemented, and available in the app (html) but the classes aren't available for this, as they weren't decided on, when exporting?
For example (just as a test I added the numbers 24 into the string literals):
<div
class="absolute rounded-full"
:class="[`w-${24} h-${24} -translate-x-${(24 / 2) - 1} -translate-y-${(24) / 2}`]"
/>
Screenshot: DevTools html screenshot from this div
But it seems the classes for w-24 and h-24 are not exported
I would like to be able to control these classes with parameters so I can still determine the style based on the UI configuration.
Is there anything I can do to resolve this?
Thanks
Pieter
TailwindCSS doesn't allow you to generate classes dynamically. So when you use the following to generate the class…
`space-x-${props.bgSize}`
…TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.
Instead, you must include the full name of the class in your source code. You can return the full value by a function something like this
function myFunc(val) {
return "space-x-"+val ;
}
where val is your size value you are passing like 24 here.
Then you can use them in DOM like this
<div
class="absolute rounded-full"
:class=`${myFunc(props.bgSize)}`
/>
By doing it this way, the entire string for every class is in your source code, so TailwindCSS will know to generate the applicable CSS.
Read more: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
I added a subscription box widget and I need to change the style to put the submit button inside the input box. It currently looks like this:
enter image description here
[enter image description here][2]
And I want it to look like this:
[2]: https://i.stack.imgur.com/Z4Aqe.png
Which I know how to do with plain html, but I'm not sure how to change the Wordpress widget html while keeping the functionality. Here is the widget code:
<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:genesis-blocks/gb-newsletter {"instanceId":0} /--></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->
Thank you in advance.
That is markup outputted from the WordPress' new block-based syntax (Background)
It's not quite HTML in that if you edit it, it would not render as you would expect; it will break, because the additional block code (not shown on the screen) expects only certain .
You have a couple options here depending how much time you want to devote to this:
Determine whether your has block styling options (borders, font, font-size, etc) already built-in to the block settings. Check the genesis blocks documentation to verify this. This will be the easiest option to do what you want but if you're asking this question, I'm guessing that the block doesn't have these options.
This is probably the best route to take:
In your group block container, on the right hand side, create a css class shown in this picture. Then, go to your theme's CSS; add a selector of that CSS class and begin adding the rules that you want. This may require some trial and error because you're likely need to write some additional selectors and increase the level of specificity so you can style exactly how you want it and override some other rules already written.
(You may also need to include !important as for your rules but that is a last resort and not a best practice for writing CSS)
You may also need to do this for the gb-newsletter block as well.
Writing your own blocks (which has frustratingly has a high learning curve, imho); this will offer the most customization but will be a LOT of time.
I have to create a primary heading component, below is my markup along with CSS classes. I'm following BEM naming convention for class name.
I have h1 element consists of two spans. One span for main heading text, and second span for sub heading text. The main and sub are variations of my heading.
I have not specified the Element class (Which could be heading-primary__text ) and i have directly attached modifier classes to span elements.
<h1 class="heading-primary">
<span class="heading-primary--main">Video Background Option</span>
<span class="heading-primary--sub">One Page Parallax</span>
</h1>
Is that a right way to follow BEM methodology without specifying Elements classes & attaching Block's modifiers classes to Elements(span)? Because i don't need elements classes.
Is there any alternate?
While this is subjective, and as per the convinience of the project . i'd recommend doing something like this- as you already have a header-primary_text element class
<h1 class="heading-primary">
<span class="heading-primary_text">Video Background Option</span>
<!--create a modifier -->
<span class="heading-primary_text--sub">One Page Parallax</span>
</h1>
In this way you can make the sub a modifier class for the subtext.
More info can be seen here https://en.bem.info/methodology/quick-start/#modifier
Hope this helps :)
I think there is a much simpler way to do this just using basic HTML. You only want to have one h1 per page and since you said that your second span of your h1 is a "subheading" I feel like you would be way better off marking that one as an h2 instead of two spans of different context within one h1 heading! Always good to use the built in benefits of HTML first if you can.
No, it is not the right way. You cannot use block (or element) modifier alone on the HTML tag without specifying the block (or element) class itself.
Please refer to BEM documentation here: https://en.bem.info/methodology/quick-start/#modifier
A modifier can't be used alone From the BEM perspective, a modifier
can't be used in isolation from the modified block or element. A
modifier should change the appearance, behavior, or state of the
entity, not replace it.
Here is a code example from the docs:
<!-- Correct. The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
<!-- Incorrect. The modified class `search-form` is missing -->
<form class="search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
You mentioned that you don't need an element class, this topic is also covered in BEM docs
https://en.bem.info/methodology/faq/#why-include-the-block-name-in-modifier-and-element-names
semuzaboi's suggestion sounds as a good alternative to me.
First of all, elements are specified after two __ like block__element_modifier.
Secondly, yes. Blocks may not have any elemenets inside, but rather have modifiers (most common case a block with lang modifiers for Internationalization (block_lang_ru))
PS as well as element may not have any modifiers inside. But block can not be nested inside another one. They should be placed inside one directory on the same level.
This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.
I have a repeater of div's that look a little bit like this:
<div class="header_div">
<!-- Content -->
</div>
I want to have the background color of the divs change based on a dynamic property of the content of the div (lets call it the category), but I still want the "header_div" style to be assgined in cases where I dont have a css class for that category. Whats the best way of doing this?
The best way I can think of is to render the category as the "id" of the div and apply styles based on the id, but that strikes me as really messy - standards dictate that the id should uniquenly identify the element on the page and there will definitely be repeats of each category.
The simple answer would be to use multiple classes for the <div> so that
<div class="header_div header_red">
<!-- Content -->
</div>
<div class="header_div header_green">
<!-- Content -->
</div>
You're correct about the need for IDs to be unique.
There's nothing stopping you from specifying more than one value per class attribute - just separate them with a space.
<div class="header_div category">
<!-- Content -->
</div>
Just be careful to check what happens when both classes specify different values for the same style - I can't say whether the first or the second would take precedence.
You could supply multiple styles for the div class:
<div class="header_div mystyle">
<!-- Content -->
</div>
I believe styles declared later in the declaration override earlier ones. As long as you ensure your custom styles "shadow" those of the header-div, you can always include the header-div element, and it will only have an effect when any secondary style is absent (or empty).
If it's going to be used repeatedly on the page, it should be a class.
If it's unique on the page, use an id.
Without knowing more about your content, can you not use one of the header tags (<h1> etc)?
You are correct, IDs should be unique and if you want to use the same style more than once then use a class.
You can't have duplicate IDs so if you had multiple divs of the same category you would have an issue. Classes should be used when the style needs to be applied for 1 or more items on a single page.
Why not assign the class on databinding of the div based on the category? As your repeater is getting bound, find your div for the item you are binding and assign it.
You could also substitute the div for an asp:Panel and use it's onDataBinding method. It should look exactly like your div.