I want a background (color) to be displayed by default for each article. I thougt of doing this in a css file, but I don't know where to place the statement. Btw I can't find the definition of the article tag in any css file.
The following code shows 2 articles:
<div class="items-row cols-3 row-0 row">
<div class="item column-1 col-md-4">
<!-- Article -->
<article>
<header class="article-header clearfix">
<h2 class="article-title" itemprop="name">
<a
href="/joomlatest/index.php/78-uncategorised/welcome"
itemprop="url" title="Welcome">
Welcome</a>
</h2>
</header>
<!-- Aside -->
<!-- //Aside -->
<section class="article-intro clearfix">
<p>Hi</p>
</section>
<!-- footer -->
<!-- //footer -->
</article>
<!-- //Article -->
</div>
<div class="item column-2 col-md-4">
<!-- Article -->
<article>
<header class="article-header clearfix">
<h2 class="article-title" itemprop="name">
<a
href="/joomlatest/index.php/dates/testdate"
itemprop="url"
title="Testdate">
Testdate</a>
</h2>
</header>
<!-- Aside -->
<!-- //Aside -->
<section class="article-intro clearfix">
<p>some Text</p>
<p>
<img src="/joomlatest/images/9697505.jpg" alt="9697505" />
</p>
</section>
<!-- footer -->
<!-- //footer -->
</article>
<!-- //Article -->
</div>
</div>
Any ideas which stylesheet or which tag I should manipulate or is there any other way this is done?
Where to put the CSS depends on the website. If you're a developer you can add CSS files to extensions etc; if a user, the template you are using is the most likely place to put your CSS and that will depend on the particular template you are using. Some templates have overrides you can select in the administrator, for others you will need to find the template (in /templates/yourtemplate) and pick which CSS file to edit; typically that will be in a folder called css, and the main css file is likely called template.css. Some commercial templates have custom css files so you can avoid having your custom css overwritten if you update the template.
For how to apply the background color, that will depend on your joomla version as well as the specific way the article is displayed. In you instance, applying to div.item probably will work, but items might also be displayed in class item-page, or a template might override the stock joomla layout for one of the various article display options. Thus you'll probably want to inspect the pages and find out what classes are used, and make sure to check various different pages to see if the different ways items get displayed (such as Category - blog, single article, featured articles, or any particular modules or components you use to display content in other ways.
I just found a solution, where I don't have to change the template's css files (thanks to Charlie for the update thought). The template I'm using (Purity III T3 template) has a menu caled "Custom Code" on the backend. Here I added code at the field After <head>.
<style>
article {
background-color: rgba(255,255,255,0.4);
border-style: solid;
border-color: rgba(51,153,51,0.5);
border-width: 20px;
padding: 20px
}
</style>
Probably not the best solution, but it works for me.
Related
Desired goal: I ultimately want my app to have a fixed, sticky menu bar at the top, then a div/component that contains the rest of the content and not scroll, while allowing the sub-components freedom to scroll when necessary. I will ultimately build this in Next JS, but I can't even make it work in plain HTML/CSS, so I'm unsure of the styles to apply in the Next code. I suspect that I have to apply styles to the outermost <body> tag, but nothing I tried seems to work. I also suspect that (to use Next), I will need to override the Document as they describe in the Next documentation and apply styles to <body>. But first, just in plain HTML...
If I write this in bad, incorrect pseudocode, I'm looking for:
<html>
<nav style="sticky to top">
<!-- Markup to render a menu. -->
</nav>
<body style="don't scroll; size=take up the rest of the page">
<table style="overflow-y: auto"
<!-- TONS OF TABLE ROWS. -->
</table>
</body>
</html>
I tried the brute force method of sticking overflow: hidden on just about every tag in the tree, but still nothing working.
I consulted this good post and saw this close post (with a terse answer) but didn't think the second post applied.
Here's dumb HTML that I was trying to get to work (ignoring the sticky nav part):
<html>
<nav>
<div style="background-color: purple;">
<p>Nav bar</p>
</div>
</nav>
<body style="overflow:hidden">
<div style="overflow: scroll">
<table style="color: red; overflow:scroll">
<tr><td>Item 1</td></tr>
<!-- Repeated the above about 20 times. -->
</table>
</div>
</body>
<footer>
<!-- Only put this here so the page bottom is obvious; not in my app. -->
<p>Footer here</p>
</footer>
</html>
For what it's worth, this is the Next/React code with Tailwind that will be the base of the main page:
const AppLayout = ({ children }) => (
<>
<header className = "sticky top-0 z-50">
<Menu />
</header>
<main id = "AppLayoutMain" className="relative bg-white antialiased overflow-hidden">
{children}
</main>
</>
);
I added extra tags in there with styles in random and unstructured ways, trying to hack it to work and no dice.
If someone could show me my errors, or post anything simple that works, I'd appreciate it. I use tailwindcss so you can express it that way if helpful.
You should be able to accomplish this by using flex-col and giving your content div overflow-hidden. Something like:
<div class="flex flex-col h-screen overflow-hidden">
<div class="flex-shrink-0">Header content</div>
<div class="overflow-hidden">
<div class="w-40 max-h-full overflow-y-auto">
Scrolling content
...
</div>
</div>
<div class="flex-shrink-0">Footer Content</div>
</div>
See it in action: https://play.tailwindcss.com/bxUwAuCs8R (shrink the screen vertically to see the scroll bar).
I have been adding , and elements to my demo portfolio, just to practice what I've learnt so far, but it seems that these tags mess up the "container" class from bootstrap.
initial version without accessibility tags
<!-- <header> -->
<div class="container">
<div class="hl1"></div>
<div class="row">
<div class="col-12 p-3">
<div class="card mx-auto" style="width: 18rem;">
<img src="./portrait2.jpg" class="card-img-top" alt="My Portrait">
<div class="card-body">
<p class="card-text">Hello there! This is me!</p>
</div>
</div>
</div>
<div class="hl1"></div>
</div>
<!-- </header>
As you can see, I've commented out the tag for the moment. After I add the header, article and footer tags, the content swaps out of the container class and the (hr)tag goes across the total width of the page.
The good part is that the content remains at the same location, like only the (hr)tag would be affected by the tags.
My question is there a way to overcome this? Or I should forget the accessibility tags for now, until I become more advanced in knowledge.
Thanks.
It'd be better if you could provide the entire code. Although, you can check if your Bootstrap CDN link is BELOW the link to your external stylesheet. This makes sure that the Bootstrap properties are prevalent over anything you have defined in your stylesheet.
I have got some elements on my page, they should all be styled the same except for every other one, where I just want to change some styling.
Here is the CSS which I was hoping would select the div inside the stack of different elements:
.stagger_reviews[class=inner]:nth-child(2n+2) {
background-color:#003;
}
Here is the HTML:
<div class="stagger_reviews">
<!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
</div>
As you can see I just want to adjust the one div inside each article which has the class name inner. And maybe some other elements as well but once I have this working I can do that.
The style isn't being applied to the second inner div, I have made about 4 copies of the article and none are being changed.
Here is the solution, I put the nth-child in the wrong place.
.stagger_reviews > article:nth-child(2n+2) div[class=inner]
I am attempting to use the :nth-child(even) technique to select my images in every other article/item I have on my page and ultimately float the images within the even articles tot he opposite side of the others.
I am using Joomla 3 with K2 which I know won't make a difference as such but will explain the bloated HTML and lots of div's all nested within each other.
Here are my code snippets:
HTML(snippet of 2 articles/items):
<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">
<!-- Plugins: BeforeDisplay -->
<!-- K2 Plugins: K2BeforeDisplay -->
<div class="catItemHeader">
<!-- Item title -->
<h3 class="catItemTitle">
Copy of A Little Bit About Us...
</h3>
</div>
<!-- Plugins: AfterDisplayTitle -->
<!-- K2 Plugins: K2AfterDisplayTitle -->
<div class="catItemBody">
<!-- Plugins: BeforeDisplayContent -->
<!-- K2 Plugins: K2BeforeDisplayContent -->
<!-- Item Image -->
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/about/cni-solutions-overview/51-a-little-bit-about-us" title="Copy of A Little Bit About Us...">
<img src="/media/k2/items/cache/eb6c7c01c4e98e1f2578f9959463b973_L.jpg" alt="Copy of A Little Bit About Us..." style="width:600px; height:auto;" />
</a>
</span>
</div>
<!-- Item introtext -->
<div class="catItemIntroText">
<h3>Experience, business continuity, quality support</h3>
<p>Our team at CNi Solutions has over 18 years’ IT experience with a proven track record of success supporting small and medium sized businesses across the North West acting as a client’s IT department, or supplementing an existing IT function.</p>
<p>We believe in helping our clients to improve business performance by leveraging well managed IT solutions, backed up by expert IT support services providing highly technical installation, virtualisation and disaster recovery solutions leading to improved technical performances.</p>
<p>Our aim at CNi Solutions is to create long-term partnerships with our clients, maintaining value for money solutions through a combination of high quality support, expert IT project delivery and applicable strategic advice.</p> </div>
<div class="clr"></div>
<div class="clr"></div>
<!-- Plugins: AfterDisplayContent -->
<!-- K2 Plugins: K2AfterDisplayContent -->
<div class="clr"></div>
</div>
<div class="clr"></div>
<!-- Plugins: AfterDisplay -->
<!-- K2 Plugins: K2AfterDisplay -->
<div class="clr"></div>
</div>
<!-- End K2 Item Layout -->
</div>
<div class="clr"></div>
<div class="itemContainer itemContainerLast" style="width:100.0%;">
<link rel="stylesheet" href="/templates/cni_solutions_purity_iii/html/com_k2/templates/about/about_style.css" type="text/css" />
<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">
<!-- Plugins: BeforeDisplay -->
<!-- K2 Plugins: K2BeforeDisplay -->
<div class="catItemHeader">
<!-- Item title -->
<h3 class="catItemTitle">
Copy of Here to Support You...
</h3>
</div>
<!-- Plugins: AfterDisplayTitle -->
<!-- K2 Plugins: K2AfterDisplayTitle -->
<div class="catItemBody">
<!-- Plugins: BeforeDisplayContent -->
<!-- K2 Plugins: K2BeforeDisplayContent -->
<!-- Item Image -->
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/about/cni-solutions-overview/50-here-to-support-you" title="Copy of Here to Support You...">
<img src="/media/k2/items/cache/a522a6005d1cb428ea34ef1769cd7452_L.jpg" alt="Copy of Here to Support You..." style="width:600px; height:auto;" />
</a>
</span>
</div>
<!-- Item introtext -->
<div class="catItemIntroText">
<h3>Supporting your Computer Network Infrastructure</h3>
<p>At CNi Solutions we believe that your Computer Network Infrastructure should be at the very heart of your business, but should not dictate the beat. CNi Solutions has been developed to provide you with full IT support, allowing you to focus on what is important - Developing and growing your business without the interruptions of an unsupported IT Infrastructure.</p>
<p>We understand that your Computer Network Infrastructure needs to be tailored to suit your needs, whether you are a start-up business with one computer, looking for someone to call offering support and advice on your anti-virus and backup needs or a large company with more than one office looking for daily support and guidance on your growing IT demands.</p> </div>
<div class="clr"></div>
<!-- Plugins: AfterDisplayContent -->
<!-- K2 Plugins: K2AfterDisplayContent -->
<div class="clr"></div>
</div>
And so on for each article/item....
CSS:
.catItemBody img {
float: right;
width: 35%;
max-width: 400px;
}
.catItemBody:nth-child(even) img {
float: left;
width: 35%;
max-width: 400px;
}
I can target the img tags using the css above as it is appearing in the element inspector, but it appears to select all the images, not just those in the even articles/items that I want.
Any ideas on where I am going wrong?
The site page is currently situated here during development: http://www.themanofice.co.uk/index.php/about/cni-solutions-overview
Everyone of your .catItemBodys is even:
<div class="catItemView groupLeading">
<div class="catItemHeader"></div> /* This one is odd */
<div class="catItemBody"></div> /* This one is even */
</div>
<div class="catItemView groupLeading">
<div class="catItemHeader"></div> /* This one is odd */
<div class="catItemBody"></div> /* This one is even, again */
</div>
Because the nth-child is calculated from the closest ascendant, not from the document as a whole.
You will have to make the selector "uglier":
.itemContainer:nth-of-type(even) .catItemBody img {}
Unless there will be no other images, then you could just use
.itemContainer:nth-of-type(even) img {}
I'm using nth-of-type instead of nth-child, just because you have clearing divs, so every .itemContainer is odd, actually.
Or you could create a new class for even items.
You are using the nth-child incorrectly to target alternate images. Your styling would only apply to alternate images if all .catItemBody elements were within the same parent.
But since they are nested within .itemContainer, the styles are not getting applied.
Try changing your css styles to:
.itemContainer img {
float: right;
width: 35%;
max-width: 400px;
}
.itemContainer:nth-child(even) img {
float: left;
width: 35%;
max-width: 400px;
}
I know the very basics of CSS and recently went on with using CSS frameworks because it made my life much easier. I have a question in terms of grid systems, am currently using zurb foundation 3 (http://foundation.zurb.com/)
The problem am facing is mostly when creating a row i cannot give it a specific height. It seems to me like grid systems are designed to use as it is, I read in different places that it is not recommended to try and change the height of a row and to just place items inside it as it is.
In my project, I have a content area whereby I want to display a fixed height and width div but its not working for me. so, can any one advise me what should i do? below is my html code
update: edited the html
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
</div>
Your 'style' declarations are wrong
style="height=6em; width:5em;
should be
style="height:6em; width:5em;"
NOTE: you used = instead of : AND you missed the closing quotation "
And you should not use inline styles - separate to a .css file and target them by class
<html>
<head>
<link rel="stylesheet" type="text/css" href="/foundation3/stylesheets/foundation.css"/>
</head>
<body>
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
</div>
</body>
</html>
NOTE: I have not declared a DOCTYPE here - this is barebones. It does work I have tested it in Firefox and Chrome. Just stating it does not work is not helpful OP