I am trying to edit blocks in drupal 7.x . My base theme is Zen. In block.css I am able to change the css style of the blocks according to their numbers. But its confusing,is there there any other way to edit the style of the blocks ?
Besides block numbers, actually drupal will attach quite a lot information for styling when generate the HTML, here is an example for the default Main Menu system block:
<div id="block-system-main-menu" class="block block-system block-menu first last odd" role="navigation">
</div>
As you can see, here we have block name embedded in div id, block type embedded in div class, and you can choose which one to use.
There is always the Block class module which lets you add custom classes to blocks for easy theming.
Related
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 am using Drupal 7. I want to animate the login block with aos.
The login block is called "block-user-login". It´s a <div id="block-user-login" ... >
Can I create some css code around to make "data-aos='zoom-in'" be associated to that #block-user-login ?
How can I create a style script to do that?
I dunno if you're still in doubt bout that. But you can try <div id="block-user-login" data-aos = 'zoom-in'> and after that you can config in css the color, the font and everything else.
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.
Any ideas on good ways to apply styling to classes of articles (categories, or anything else?)
Currently, I create a first pass at the article manually, wrapping it in a span:
<span class="foo">
<p>bar</p>
<p>etc</p>
</span>
I then paste the article into JCK Editor, and have a new css file in the template directory to handle class foo.
This doesn't work very well, since JCK Editor moves the span class to the internal elements, producing something like
<p><span class="foo">bar</span></p>
<p><span class="foo">etc</span></p>
This is Ok until you start editing the article with JCK Editor, because the new content doesn't go in the span:
<p><span class="foo">bar</span></p>
<p><span class="foo">etc</span></p>
<p>New unstyled content inserted by JCK Editor</p>
I'm on Joomla3. What would be ideal would be if the name of the category appeared in the html, so I could hang a style on it, but it doesn't.
There are a number of ways to approach this. If you want to add a class to the body tag for this purpose, take a look at how I do it at https://github.com/construct-framework/construct5/blob/master/index.php#L65 and starting at https://github.com/construct-framework/construct5/blob/master/elements/logic.php#L235. This assumes that you are going to edit your template.
You could also whip up a simple plugin to add these classes to you body tag dynamically.
Otherwise, it could be possible to do this with something like http://extensions.joomla.org/extensions/style-a-design/templating/14053
If each category is sitting on own menu item, you may add 'Page Class' suffix for container div (Advanced Options > Page Display Options)
Other way would be adding template override:
copy components/com_content/views/category/tmpl/blog.php to templates/[your_template]/html/com_content/category/blog.php)
And inside of the file change
<div class="blog<?php echo $this->pageclass_sfx;?>">
to
<div class="blog<?php echo $this->pageclass_sfx . ' ' . $this->category->alias;?>">
You should probably not add p-elements inside span-elements, as span is an inline element and should not contain block-elements like p. This is why JCK is switching the elements. If you use a div-element instead, you probably won't have this problem with the text-editor.
Apart from this, I guess both the other respondents have good points.
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.