2nd image from this link -
Not sure what exactly you are asking about. I’ve looked at both posts (screenshots) and my best guess is you want to know about styling the sidebar?
Armadillo uses the same HTML attributes (IDs and classes) as the built in RapidWeaver blog plugin (page). So the basic styling is handled by the theme you are using.
That of course can be changed with custom CSS, and with Armadillo you can apply the custom CSS in directly in Armadillo or the usual RapidWeaver way at either the page or site level.
If you’re asking for help with custom CSS it’s best practice for you to provide a link to at least a test page and be specific as to what you’re looking to change.
Thank you so much for replying!
Here is my test page - http://test.worth.sg/armadillo/test.php
These are my questions about the stack, Armadillo Blog Navigation. I would like to achieve the following
- Place a header text (Categories) above the text Fruits
- Place a header text (Archives) above the text August 2019
- Place a header text (Tags) above the text Apple
- Place spacing between each section (Categories, Archives, Tags) so they don’t appear so close.
Do let me if it’s not clear.
Okay
Here is a good starting point for each one:
Place a header text (Categories) above the text Fruits
div#blog-categories:before {
content: "Categories";
display: block;
font-size: 1.3rem;
padding-bottom: .5rem;
}
Place a header text (Archives) above the text August 2019
div#blog-archives:before {
content: "Archives";
display: block;
font-size: 1.3rem;
padding-bottom: .5rem;
}
Place a header text (Tags) above the text Apple
ul.blog-tag-cloud:before {
content: "Tags";
display: block;
margin-left: -40px;
font-size: 1.3rem;
padding-bottom: .5rem;
}
Now on that one you end up with the Unordered list with the disc style type and padding of 40px (future theme default for unordered list). Thats the reason for the negative margin on the “Tages” before content.
If you want to have that more in line with the Archives and Categories and remove the “disc” then add this CSS and remove the negative margins:
ul.blog-tag-cloud {
list-style-type: none;
padding-inline-start: 0;
}
Place spacing between each section (Categories, Archives, Tags) so they don’t appear so close.
div#armadilloBlogNav > * {
padding-bottom: 25px;
}
Thank you so much for the CSS code!
I do not know the purpose of this and can’t understand. The ordered list under “Tags” messed up after adding. Thus I ignore this code
ul.blog-tag-cloud { list-style-type: none; padding-inline-start: 0; }
I need 5 more requests. Hope you can assist.
-
Under the “Title 3 Test” on http://test.worth.sg/armadillo/test.php, make the text “Fruits” same colour as Tags “bananas”
-
Between each blog post “Title 3 Test” to “Title 2 Test”, there’s a big space apart, make it closer?
-
Under the side bar, align the ordered list below in a more neat alignment (See picture below).
-
Create a “frame” for each post like the print screen, I post on http://test.worth.sg/armadillo/test.php
-
Create a RSS header like Categories, Tags, Archives
Again, I really appreciate your help!
Sorry I missed your reply (thanks for the DM to remind me)
I think I have everything you requested. I’ve combined it all into a single chunk so just copy this and replace what you had before:
/* Place spacing between each section (Categories, Archives, Tags) so they don’t appear so close. */
div#armadilloBlogNav>* {
padding-bottom: 25px;
}
/* Place a header text (Categories) above the text Place a header text (Categories) above the text */
div#blog-categories:before {
content: "Categories";
display: block;
font-size: 1.3rem;
padding-bottom: .5rem;
}
/* Place a header text (Archives) above the text */
div#blog-archives:before {
content: "Archives";
display: block;
font-size: 1.3rem;
padding-bottom: .5rem;
}
/* Place a header text (Tags) above the text */
ul.blog-tag-cloud:before {
content: "Tags";
display: block;
font-size: 1.3rem;
padding-bottom: .5rem;
}
/* align the ordered list below in a more neat alignment */
ul.blog-tag-cloud {
list-style-type: none;
padding-inline-start: 0;
}
/* remove space between each blog post and add border */
.blog-entry {
border: 1px solid darkgrey;
margin-bottom: 0.5rem;
padding: 1rem;
}
/* Create a RSS header */
#blog-rss-feeds:before {
content: "RRS";
display: block;
font-size: 1.3rem;
padding-bottom: .5rem;
}
/* Make filed in same color as tags */
span.blog-entry-category {
Color: rgba(254, 135, 135, 1.00);
}
1 Like
As usual, thank you for your reply.
Can you provide the CSS code to move the RSS section up, spacing to be like the two blue lines (See print screen above).
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.