![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
lumemiruuuuuuuuuuu
lumemiruuuuuuuuuuutropicsbearHello!
I tweaked the fonts in my layout then noticed afterwards that the tiny username icons were misaligned with the text beside them. I was able to fix it using the code below for DW users and communities, but for other sites like AO3 and YouTube, the tiny username icons are still aligned at the bottom.
Thanks in advance for any help 🙏🏽
doodlemancy
porn_clipsalibraryofunreadbooks
magnavox_23
tobliI'm trying to add custom HTML to the head element on my journal pages. I followed the instructions here and created a new theme layer with just these lines (my journal uses Tabula Rasa):
layerinfo type = "theme";
layerinfo name = "fediverify";
function Page::print_custom_head() {
"""<link rel="me" href="https://ple.praze.net/users/tre">""";
}
I've enabled the layer on my styles page, but the new line of HTML isn't showing up in the page source. I have an i18nc layer that works properly, so I presume everything is fine in terms of the actual layer being applied but the function just isn't doing anything. Is there anything else I should try?
bibbinut
parnassianmusyc
juneghostsseleneheartqrformdiv there is the following code:element {
min-width: 696px;
position: relative;
right: 75px;
background-color: rgb(103, 150, 199);
}right: __px; grows larger. In the inspector, if I reduce the value of right: , it fixes the problem. However, that's not feasible to go in for every comment, or try to anticipate how long a thread could get. I have a paid account, and I'm using Abstractia as the base of the theme.wraithmooncanadannesunlit_skycat![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
blueheronteanook . Venture style, Radiant Aqua theme, with a bunch of custom CSS.foxway did in the style made by girlrock , which was to change the navigation module so that the text is different and the links lead to other pages than the default set. However, this is a different theme, Venture. I followed Girlrock's instructions for how to achieve that with a custom theme layer, and confirmed that it works on the navigation module of Venture. I want to know how to do this to the header navigation module of Venture instead.haptalaonI just popped a little creature on my journal, in the bottom left-hand corner, which follows the page as visitors read, keeping an eye out for mischief.
(little creature designed by dollarchive.neocities)
Step 1: upload your picture somewhere. Make sure it's small, and has a see through background
Step 2: display the custom 'Text' module on your layout
Step 3: in the Customise Journal > Text screen, include this code in the Text for the 'Custom Text' box:
<dialog open><img src=YOUR-URL-HERE></dialog>
In the past, you would create invisible boxes and containers to structure your HTML with div boxes. Modern HTML gives you options to do 'semantic html' - so instead of a generic div, you can use tags like header, nav, article and section to do essentially the same thing you do with a div, but screen readers can navigate it more easily and it's nicer to code too
dialog is a rarely used html tag, so we can sneak it in here to target in our CSS, knowing it likely won't appear anywhere else in our css. (Using id selectors didn't seem to work with dreamwidth's code-wrangler; using a div is too generic, as there are several other divs in module-content).
Step 4: go to Customise CSS and paste in the following:
.module-content dialog { position: fixed; z-index: 3; bottom: 0; right: 100%; background: none; border: none; }
This tells the browser how to display the dialog box - moving it out of the Custom Text Module and all the way over the page, where it floats over the webpage.
Step 5: check accessibility. Shrink down the browser window size and use the inspect tool or a website to see how the page looks on mobile. Ensure that it doesn't cover up text you want people to read.
If it's a problem, you can get the Guardian to disappear once the browser window goes under a certain size. Put this code (or similar) into the Customise CSS section:
@media only screen and (max-width: 600px) {.module-content dialog {display: none}}
If the browser window is 600px wide or smaller, the website won't load the Guardian image at all, as if it never existed
Ideas: What creative purposes could you put this to? An animated gif. A pixel animal that moves, reacts or changes when you hover or click on it. A link. Something practical.
lumemiruuuuuuuuuuu - does anyone know how to put gifs in entries?juneghost - (no subject)lumemiruuuuuuuuuuu - does any1 know how to put a gif/image on the banner?tropicsbear - SOLVED: Adjusting vertical alignment of username iconsdoodlemancy - Please help me defeat the Mysterious Ugly Boxporn_clips - About change the Stylesalibraryofunreadbooks - community thememagnavox_23 - Creating a static width for entriestobli - Custom page head questionbibbinut - I am back posting again at Dreamwidthparnassian - DW -> IJ Conversionmusyc - Need a code adjustment for 'details'raivotar - (no subject)juneghosts - (no subject)juneghosts - (no subject)seleneheart - Commet Threads 'Right' valuewraithmoon - (no subject)canadanne - Problem with custom link textsunlit_skycat - Change header navigation module to have different text and links in Venturehaptalaon - Floating Journal Guardianonlyembers