I'm having problems using Tumblr's custom variables functionality with externally hosted CSS.
Background
Tumblr themes are written as a single page of html with all CSS stored in <style> tags in the document <head>
Tumblr allows user-defined data to be stored in variable of your naming, wrapped in curly braces. These can then be applied in the CSS. An example might be a color hex code being attached to {color:BackgroundColour} which can then be used in place of a #value in the CSS. (More info)
When a browser renders the page the data stored in {color:BackgroundColor} is returned as the hex code and everything is ok.
Problem
To make theme development easier I am hosting my CSS externally and linking in the <head>
When the page renders, my custom variables are returned as the as they are written in the CSS, rather than pulling the attached value.
So the page renders:
#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
background-color:{color:BackgroundColor};
}
Instead of:
#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
background-color: #dedede;
}
This only happens when the CSS is linked from external hosting. Is their a way that I can get around this?
From my limited understanding of the tumblr templating engine I do not believe this is possible with a remotely hosted css file. All of the variables declarations are rendered server side and served up to the client with the correct syntax. No matter how you inject your externally hosted css file it will be to late as the server already rendered the content.
The only compramise I could see working would be to split up your css file to selectors that require the variables and ones that do not.
Example:
style block contained in the tumblr page.
<style type="text/css">
#header{
background-color:{color:BackgroundColor};
}
</style>
Externally hosted file:
#header{
width: 600px;
margin: 0;
padding: 0;
border: 0;
}
That way you can fulfill your requirement of an externally hosted css file but also utilize the tumblr engine.
Related
I'm new here and just started learning CSS. This is my first (question)post and maybe the format of my (question)post might not be appropriate.In that case I humbley ask your forgiveness. I'm not very successful in applying/editting css for my site.
I'm trying to center (image)content in the #media only screen and (max-width: 420px)viewport. Searched,found and tried a few solutions for this issue as mentioned in this forum but to no avail. One of the problems is that my wordpress 6.x theme has a load of different style sheets and i have no clue in which order they operate.
This is what i found browsing the style sheets; Beneath each code is the name of the css source file it came from. Can someone please point out which file i should edit and what code i should alter or apply?
If needed i can give access to my site (which is local only atm) or post screenshots!
*source: responsive.min.css :
#media only screen and (max-width:420px){body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,body.boxed.has_general_padding .wrapper .wrapper_inner,body.boxed footer,body.boxed .header_inner,body.boxed .full_width .parallax_content,body.boxed .carousel-inner,body.boxed .content_wrapper{width:320px}.header_bottom,footer .container_inner,nav.content_menu{padding:0 15px}.side_menu .close_side_menu_holder{right:12px}.pp_content{height:250px!important}.pp_hoverContainer{height:200px!important}nav.content_menu .nav_select_menu{border:0}
*source: responsive.css
#media only screen and (max-width: 420px){
body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,
body.boxed.has_general_padding .wrapper .wrapper_inner,
body.boxed footer,
body.boxed .header_inner,
body.boxed .full_width .parallax_content,
body.boxed .carousel-inner,
body.boxed .content_wrapper{
width: 320px;
}
.header_bottom,
footer .container_inner,
nav.content_menu{
padding: 0 15px;
}
.side_menu .close_side_menu_holder{
right: 12px;
}
.pp_content {
height: 250px !important;
}
.pp_hoverContainer{
height: 200px !important;
}
nav.content_menu .nav_select_menu{
border: none;
}
}
The first file (responsive.min.css) is the minified version of the second file (responsive.css), that means that the minified version has no unuseful character like spaces, tabulations...
The minified version of assets like css, js and sometimes directly html page is used to avoid loading unuseful character and to make download faster. So your theme is probably using the minified version.
I really suggest you edit responsive.css and then, thanks to lots of tools you find on the Internet, create the minified version and replace the existing one.
To center the content you have 2 ways:
Setting a fixed width for your content and then setting a margin: auto; property;
Setting the container of your content to display:flex and then setting your content to justify-content: center;
You can check if certain input fields are not filled using the isset() function in PHP: For example:
if (isset($_POST['sku']) {
//exists
}
While to check if the product already exists you have to check if it exists in database so you must necessarily make a query.
I am using antora for documenting a product architecture specification. We have large diagrams so allowing the svg images to scale up as large as possible when maximizing the browser window is a big plus.
I am not even a css novice. I know almost nothing. I can build antora documents (web pages) so I know only a tiny bit of antora from a user perspective.
I found this comment on how to make the scaling work. https://gitter.im/antora/users?at=5d97c8ea37073b36a06fddb8
I can get the desired results if I edit doc.css, build a ui-bundle.zip, point local-antora-playbook.yml at the newly created ui-bundle.zip and rebuild the site.
.doc {
color: var(--doc-font-color);
font-size: var(--doc-font-size);
hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
/* max-width: var(--doc-max-width); */
padding: 0 1rem 4rem;
}
#media screen and (min-width: 1024px) {
.doc {
flex: auto;
font-size: var(--doc-font-size--desktop);
margin: var(--doc-margin--desktop);
/* max-width: var(--doc-max-width--desktop); */
min-width: 0;
}
}
This is the suggested edit in the comment link I found and posted just above. I would prefer to use the supplemental-ui approach that is referenced here; Antora top navigation bar customization and actually used by the documentation for antora https://gitlab.com/antora/docs.antora.org.
I can see that my edited doc.css gets created in the new site when I build via a supplemental-ui approach. However, I don't get the desired results of being able to use the max-width of the web browser when maximized. I understand that in css if you declare something later it takes precedence. I'm wondering if the absence of a max-width is simply not being observed because of the order of sourcing files. I've tried different file names like doc.css and xdoc.css thinking they were sourced alphabetically. This didn't seem to help.
Is there a way to make this small css change and use the supplemental-ui approach of getting it into my antora site when I build it?
I would like the supplemental-ui approach to work so we can always stay up to date with antora changes and only have our tiny change to max-width. The approach I have working requires building antora with the tiny change and pointing at that new zip file to build antora instead of sourcing the current latest antora in the public antora repo.
For debug I also tried this approach with the supplemental-ui build procedure. I understand !important is not recommended but I was just trying to figure out if I could get something working other than the full build to a zip file.
.doc {
color: var(--doc-font-color);
font-size: var(--doc-font-size);
hyphens: auto;
line-height: var(--doc-line-height);
margin: var(--doc-margin);
/* max-width: var(--doc-max-width); */
max-width: none !important;
padding: 0 1rem 4rem;
}
#media screen and (min-width: 1024px) {
.doc {
flex: auto;
font-size: var(--doc-font-size--desktop);
margin: var(--doc-margin--desktop);
/* max-width: var(--doc-max-width--desktop); */
max-width: none !important;
min-width: 0;
}
}
It's possible to alter the effective css using supplemental UI but is slightly less performant (requiring fetching an additional css file) and I don't recommend it. The process of building a UI bundle puts all the css into one optimized file, which cannot really be modified later using supplemental UI. Therefore what you have to do is add a "new" css file in your supplemental UI containing the modifications or overrides you want, and also include a partial that pulls in your additional file.
For instance, if your additional file is css/expand-svg.css, you'd need also a partials/head-styles.hbs containing
<link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
<link rel="stylesheet" href="{{uiRootPath}}/css/expand-svg.css">
I tried this with the additional css file containing
.doc {
max-width: none;
}
#media screen and (min-width: 1024px) {
.doc {
max-width: none;
}
}
and it appears to work as you want. The !important isn't needed as the additional css appears later than the default UI css so overrides it.
Can anyone tell me why in the world Initializr's bootstrap html template has a single style for body in a element in the head of the page? It's right after the bootstrap.css file.
body {
padding-top: 50px;
padding-bottom: 20px;
}
My question is: isn't it a little odd to throw a one-off style directly in the markup and not just include it in the bootstrap.css file? Is there some specific reason anyone knows of as to why it was done this way? CSS belongs in CSS files, no?
Taking a quick look I would assume because it relates to that page specifically.
What if on another page you didn't want the navigation bar? You then have to override the style implemented in the .css file manually to correct the padding. Seeing as it's only one statement, I'd say it's fair to include it at the top of the page rather than putting it in it's own .css file.
Would you really want to obscure a framework .CSS file by including potentially page-specific code (that would muddy the framework)?
Edit: To elaborate - if you have a rigorous structure across dozens of pages, each with consistent style, it would only make sense to centralise this content into a .css file, however from an industry perspective I would more-than-likely still not put it into a framework .css file (think about future implementations, upgrading the framework, versioning etc etc).
I saw this and just about eliminated my Initializr foundation because:
A) The Initializr index.html rendered differently from the same page on getbootstrap.com and I could not figure out why
B) It was not at all obvious why this style was inline inside the <head> section since there was no comment.
Thankfully I did not delete the Initializr files. It turns out getbootstrap.com includes these same styles (but via a very small stylesheet named theme.css). The values are a bit different than the ones you mentioned, but same idea.
The theme I was referencing included this theme.css:
body {
padding-top: 70px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
.theme-showcase .navbar .container {
width: auto;
}
So, long story short- Initializr did the right thing here by removing the extra include in my opinion... HOWEVER, a <!-- Comment --> explaining what those styles are should be there. There are comments on most sections, yet none for this snippet.
Anyways, I am keeping my beautiful Initializr Bootstrap code base, and figuring out what pages need what values of what snippets lol.
I recently created a initial template with initializr for a bootstrap project. I noticed that there is a style tag in the body:
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
Is there a reason this is not in a external css file? Or can this be put in a external css without negative implications?
It should be the same as writing an external file. However, it may be an easier way if you have minimal attributes to add.
The only difference is this would override any external css file that set the body to a different padding-top and/or padding bottom.
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?