I've made a website using the academic theme of hugo; there's an example provided here. I want all of my posts (of which there are three examples provided at the link) to be wider. For example, a post initially looks like this:
where the text is constrained within a more narrow window, but I want it to look like this:
where the text has the same width as the page.
I notice that I can make this happen by unchecking the 'max-width' specification in '.article-container'. How can I edit my local files for my personal page with the academic theme to make it so this automatically happens?
This may be done by overriding the CSS in the .article-container selector.
.article-container {
max-width: none;
}
The simpler way is to create a file layouts/partials/custom_head.html where you place the above CSS rule inside a <style>...</style> block.
Another way is to create a file assets/css/custom.css with that rule, and then updating the property plugins_css in the file config/_default/params.toml so that the new stylesheet can be included as part of the loaded stylesheets.
plugins_css = ["custom"]
Related
I'm migrating my site from Bootstrap to Tailwind 3 and, in the process, built-in solutions (Dropdown, Tabs, Accordion...) needed to be replaced with alternatives. The section I'm working on right now is a custom Comments Editor I created.
I'll leave a link to what Tailwind's Playground generated for me in a CodePen because the code is longer than the maximum number of allowed characters here. The decision to create a Pen is only because in the Playground it doesn't work as the anchors open in new windows/tabs.
Anyway, the code that really matters, what makes the tabs work, is this one:
[data-target] {
scroll-margin-top: 10rem;
}
[data-target]:last-of-type + [role="tabpanel"], :target + [role="tabpanel"]{
display: flex;
}
[role="tabpanel"], :target ~ [data-target]:last-of-type + [role="tabpanel"]{
display: none;
}
As the title says, I'm looking for a way to change the background-color of the tabs, hinting to the User which one is currently active.
To accomplish that, I would need to switch Tailwind's bg-color-0 with bg-color-100 and take border-b-color-0 out of the once active tab and give it to the new one. But I don't know if I can do that only with CSS.
Not add/remove the classes per se, only their corresponding styles
I've seen a lot of implementations of Pure CSS Tabs, and all of them used hidden <input> fields. Though this implementation doesn't use them, I've added and named them accordingly, but I could only target them with CSS if the User clicked exactly where they're positioned (top-left of the tabs) instead of any part of them.
I'm aware I'll eventually have to add JS to switch the ARIA attributes, but is the basic functionality possible to be accomplished with CSS only? If not, is there an alternative implementation with which I could?
Thank you for your time :)
I have a menu called XYZ-spanish and created another one called XYZ-english. I want to apply the same CSS style to my new menu but it conditional based on the Joomla menu type name. The css it applies is in /web/templates/templatename/css/custom.css, but I have yet to find how it ties it to the menu-type name.
I have grepped through the whole directory tree with grep -r 'XYZ-spanish' * and grep -r '.scrolltojsmenurightcustom' * which is the class name is applies to the menu. However I have checked the modules and none of them have any classes applied to them. The only clue I have that is I change the menu type name the styling gets removed. I'm going bananas looking for how it's applying it? Where should I look?
I have also searched through the database looking for both words and have yet to locate anything significant.
The only thing listed in the custom css is:
.scrolltojsmenurightcustom {
color: #ff5c00 !important;
padding-top: 0em !important;
line-height: 0px;
}
This depends on which menu system are you using, is your menu an extension? or part of your template?
Also you can use a tool like Firebug or similar to inspect the source code of your page in your browser.
A tool like this will give you information about the selectors and the path where they are located, the line number and the name of the file that contains this selectors. Once you have this information you can add or change the values of the CSS.
I have created a UI (for wordpress plugin) in which I give user choice to add text, image, and video in a div ( lets call this div, container).
I have been working on it for a quite sometime. I recently added tinyMCE (WYSIWYG editor) to add text inside container.
Now, I realized that I did a big mistake. The text user writes is being overridden by css rules defined for wp admin panel.
for example,
User enters <h1>Hello</h1> (with the help of tinyMCE), and then I grab that content from tinyMCE and append that in the container.
But here the problem arises, wordpress's admin css can have css rule like this,
h1 {
color : #d6d6d6;
line-height: 40px;
font-size: 30px;
}
So, it looks different in tinyMCE and in my container. (as tinyMCE's code is inside iframe and that remains unaffected by wordpress's css rules, but my container doesnt)
I want something so that any element inside container remains unaffected by wordpress's admin css.
I know a good solution would be putting container inside iframe. But I have written a lot of code without thinking of an iframe and I would need 3-4 days just to adjust everything for iframe. There may be some cross browser issues.
I can reset some wordpress rules, but it will fail sometimes, as user may enter anything. I need something fullproof.
well if you want to undo a specific rule (say the h1 rule you mentioned) you can use css to override it by being more specific.
.container h1 {
color:#000000;
line-height: 24px;
font-size: 24px;
}
This will overwrite the css rule you mentioned with the given values but only when the element is inside the container class, (I'm guessing at the default values you want to use.)
Unfortunately you would have to add in an undo rule for everything that wordpress's admin css changes.
Another possible solution is to edit the page tinyMCE returns in it's frame to add in wordpress's CSS file. This means the end user will see the same formatting when they enter the information as when it gets posted.
Do you have code-level access to the iframe contents tinyMCE creates?
Use !important in your CSS document. This way your CSS will not be overridden as it takes precence over everything, including inline styles.
h1 {
color:#ff0 !important;
}
I'm struggling with a property that is defined in 3 stylesheets:
Joomla.css
My Site's Template.css
Content extension using K2.css
The problem is that I need to align a toolbar to the right. The property text-align is correctly defined in the K2.css but is ignored and rather the one in the joomla.css is loaded.
I attached a screen shot that shows the issue.
Any idea what am i doing wrong and how could I override this property just for one container?
Thanks in advance.
Eyal
For such special cases I used to define an style with !important and use it where ever I have to override.
CSS
.text-align_right {
text-align: right !important;
}
HTML
<div class="itemToolbar text-align_right">
..
Also, if you view the source of the page, you'll see the order in which the style sheets get added. Evidently joomla.css is further down the source than k2.css
If there are a large number of these cases, you might like to edit your template html and put joomla.css right at the start of the head section. If that is added dynamically, though, look at the nonumber extension 'Rereplacer' which should be able to switch the order around with a bit of work.
Add your css rule to the bottom of K2.css
When you create the menu in your module manager, assign it a class. Then you can set the style for that class in your template.css file.
Best,
Cynthia
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.