devcows/hugo-universal-theme

align image/figure in center of .md file

stiatragul opened this issue · 5 comments

stiatragul commented

I have been trying to figure out a way in which I can align the figure in the centre of the page.

I tried something like this in the short code align="center"
{{< figure src="img.jpg" width=30% title="caption" align="center" >}}

But no luck. I've seen suggestions elsewhere that this can be customised in the static/css/custom.css but
As someone who does not have very much experience with CSS, I'm not sure where to start.

Could someone suggest a modifications to the custom.css that can make this work?

Cheers!

ryanfox1985 commented

hello @stiatragul do you have your site pushed to github?

ambarja commented

Hello, Is there a solution for this issue ?
Personally, I edited the oupt html

stiatragul commented

hello @stiatragul do you have your site pushed to github?

@ryanfox1985 Sorry for the late response! I do have my repo here. I took some time to read issues #262 and #261 and was able to override the css with /static/css/custom.css in the ExampleSite. However, when I tried it on my own site, I was not able to change anything, not just the alignment of the image. You will notice that my custom.css file I included:

:root {
  --primary-accent: #c724bf;
  --navbar-border-top: #d6198e;
  --button-border: #2a7d8c;
  --link-focus: #267280;
  --form-shadow: rgba(56, 167, 187, 0.6);
  --pagination-bg: #a7dbe5;
  --link-hover-bg: #2c8494;
  --navbar-focus: #80cbd9;
}

But when I render the site with hugo server --disableFastRender I still do not see the colour change. I'm wondering if this has to do with my config.toml file or the location of my themes directory?

@ambarja can you share how you would edit the output html?

stiatragul commented

hello @stiatragul do you have your site pushed to github?

@ryanfox1985 Sorry for the late response! I do have my repo here. I took some time to read issues #262 and #261 and was able to override the css with /static/css/custom.css in the ExampleSite. However, when I tried it on my own site, I was not able to change anything, not just the alignment of the image. You will notice that my custom.css file I included:

:root {
  --primary-accent: #c724bf;
  --navbar-border-top: #d6198e;
  --button-border: #2a7d8c;
  --link-focus: #267280;
  --form-shadow: rgba(56, 167, 187, 0.6);
  --pagination-bg: #a7dbe5;
  --link-hover-bg: #2c8494;
  --navbar-focus: #80cbd9;
}

But when I render the site with hugo server --disableFastRender I still do not see the colour change. I'm wondering if this has to do with my config.toml file or the location of my themes directory?

@ambarja can you share how you would edit the output html?

Update! I tried running localhost on another browser (Edge) and I can now see the difference from the custom.css override. Maybe because Firefox kept a cache or something.

ryanfox1985 commented

Solved by this PR: #347