Not logged in. · Lost password · Register
Forum: General Help and Support Templates and Layout RSS
Center logo position
Avatar
Tattoofreak #1
Member since May 2018 · 12 posts
Group memberships: Members
Show profile · Link to this post
Subject: Center logo position
Hey guys,

now this is drivin' me nuts because I just don't get it how I can center the position of my dokuwiki logo.
I am using adoradark template and what I did is the following:

Created a file called "custom.css" into the folder "lib/tpl/adoradark/css" and linked the file inside the file "style.ini".
Now the content of my custom.css is the following and everything is working fine, except the last two classes which should change the logo position. Any ideas?

  1. /* titles  */
  2.  
  3. h2,h3,h4,h5 {
  4.     color: orange;
  5.     text-decoration: none;
  6. }
  7.  
  8.  
  9. /* internal links */
  10. div.dokuwiki a.wikilink1:link {
  11.     color: #FFFF88 !important;
  12. }
  13. div.dokuwiki a.wikilink1:visited {
  14.  color: #FFFF88 !important;
  15. }
  16. div.dokuwiki a.wikilink1:hover {
  17.  color: white !important;
  18. }
  19.  
  20.  
  21. /* external links */
  22. .urlextern {
  23.     color: #FFD700 !important;
  24. }
  25.  
  26.  
  27. /* monospaces (''myText'') */
  28. code {
  29.     color: black !important;
  30.     font-style: italic;
  31.     background-color: #D8D8D8 !important;
  32.     border: none !important;
  33.     box-shadow: none !important;
  34. }
  35.  
  36.  
  37. /* code.class */
  38. .code {
  39.     color: #808080 !important;
  40.     background-color: #FAFAFA !important;
  41.     font-style: italic;
  42.     border: none;
  43. }
  44.  
  45.  
  46. /* box.class  */
  47. .box {
  48.     border-color: #FFA500 !important;
  49. }
  50. .box_content {
  51.     border: none !important;
  52. }
  53. .box_title {
  54.     font-size: 16px !important;
  55.     color: #FFA500 !important;
  56.     text-decoration: underline !important;
  57. }
  58.  
  59.  
  60. div.dokuwiki .logo {
  61.     margin: auto !important;
  62.     width: 100% !important;
  63. }
  64.  
  65. div.dokuwiki .logo a {
  66.     margin: auto !important;   
  67.     width: 100% !important;
  68. }
Avatar
LarsDW223 #2
Member since Sep 2014 · 344 posts · Location: Paderborn
Group memberships: Members
Show profile · Link to this post
Try to replace the last class with the following code:

div.dokuwiki .logo a img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

I did not try the code inside dokuwiki, but the CSS standalone works. Please test yourself.
Avatar
Tattoofreak #3
Member since May 2018 · 12 posts
Group memberships: Members
Show profile · Link to this post
Thank you for your help but it's not working in my case.
Edit: Yes, I did clean the cache.
Avatar
LarsDW223 #4
Member since Sep 2014 · 344 posts · Location: Paderborn
Group memberships: Members
Show profile · Link to this post
I installed template adoradark and added the following to my userstyle.css:

div.headings {
    display: block !important;
    width: 100% !important;
}


div.headings h1 {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 25%;
}

This does not work perfectly. That means it is not the perfect middle. The width value needs to be adjusted to your image width so that you get a good result. Without the width property the image does not change position at all.
Avatar
Tattoofreak #5
Member since May 2018 · 12 posts
Group memberships: Members
Show profile · Link to this post
Okay, that worked like a charm, thank you very much!
Now as I have multiple Dokuwikis online could you also tell me how I can NOT show any logo? Is it possible to complete delete the logo?
Avatar
LarsDW223 #6
Member since Sep 2014 · 344 posts · Location: Paderborn
Group memberships: Members
Show profile · Link to this post
If you again use userstyle.css you can add the following to suppress displaying of the image:

div.headings h1 img {
    display: none !important;
}

If you haven't read it yet I suggest you read https://www.dokuwiki.org/devel:css#user_styles. In general using userstyle.css is a save and good way to do minor modifications on existing templates.

The good thing is: your changes will not be overwritten on updating your template.

The negative thing is: if you ever switch to a different template then your userstyle.css code might not fit to the new template. If you do a lot of changes to an existing template then the question arises if it is worth it to create an own template. There you could make things like having an image or not configurable via the "Template Style Settings". Of course this requires the time, the will and the knowledge to do it.
Avatar
Tattoofreak #7
Member since May 2018 · 12 posts
Group memberships: Members
Show profile · Link to this post
That really did the trick, thanks a lot mate! For all your help! That saved me a lot of time!
Avatar
Tattoofreak #8
Member since May 2018 · 12 posts
Group memberships: Members
Show profile · Link to this post
In reply to post #6
Hey LarsDW223,

sorry to ask a question again but I just can't get this solved.
I did hide the logo which is working fine.
Now I'm just not able to vertically center the text of
div.headings h1 a
which contains the text for the main title of my dokuwiki-page (have a look on the screenshot I uploaded). As I understood this text is part of
div.headings
which is placed underneath the text, right?
This is the code. Only way I found out to get it vertically centered was to insert
height: 150% !important;
as shown below but I guess this is not the correct and beautiful way of programming this, right?

  1. /* headings */
  2. div.headings {
  3.     display: flex !important;
  4.     width: 100% !important;
  5.     font-size: 100% !important;
  6.     border-bottom: 3px solid transparent !important;
  7.     border-top: 3px solid transparent !important;
  8.     padding-bottom: 3px !important;
  9.     padding-top: 3px !important;
  10.     padding-left: 0px !important;
  11.     padding-right: 0px !important;
  12.     border-image: linear-gradient(90deg, black, #a91b1a, #ff722b, #a91b1a, black) !important;
  13.     border-image-slice: 1 !important;
  14.     color: #B2B2B2 !important;
  15.     align-items: center !important;
  16.     justify-content: center !important;
  17.     height: 30px !important;
  18. }
  19.  
  20. div.headings h1 a {
  21.     display: block !important;
  22. }
  23.  
  24. div.headings h1 {
  25.     height: 150% !important;
  26. }
  27.  
  28. div.headings h1 img {
  29.     display: none !important;
  30. }
The author has attached one file to this post:
Unbenannt.PNG 13.1 kBytes
You have no permission to open this file.
Avatar
LarsDW223 #9
Member since Sep 2014 · 344 posts · Location: Paderborn
Group memberships: Members
Show profile · Link to this post
Well, I think your solution is right because I assume that as the horizontal alignment needed the width property, the vertical alignment will need the height property.

But it might be improved like this:

div.headings h1 {
    height: 1em !important;
}

I did not test this code. Please test yourself.

So, it's basically the same as your code but using a different unit. 1em means 1 time the font size. Which should be exactly what you need as you only have text in your heading.
Avatar
Tattoofreak #10
Member since May 2018 · 12 posts
Group memberships: Members
Show profile · Link to this post
1em
is even worse, the text "jumps" outside (below)  the horizontal heading-lines. I have to insert
2.3em
to get almost the same result as
150%
.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2018-12-14, 04:31:51 (UTC +01:00)