Update dokka-customFormat-example to use up-to-date logo styles (#2608)

3 files changed, 45 insertions, 4 deletions

diff --git a/examples/gradle/dokka-customFormat-example/README.md b/examples/gradle/dokka-customFormat-example/README.md
new file mode 100644
index 00000000..00dd668c
--- /dev/null
+++ b/examples/gradle/dokka-customFormat-example/README.md
@@ -0,0 +1,24 @@
+## Dokka custom format example
+
+This example demonstrates a few things:
+
+1. How to override css styles and add custom images.
+2. How to change logo used in the header.
+3. How to register a custom `Dokka` task with its own independent configuration.
+
+### Running
+
+`dokkaCustomFormat` task has been created in the buildscript of this example project with a few configuration changes.
+
+In order to see the full effect of these changes, run `dokkaCustomFormat` task from your IDE or execute
+the following command:
+
+```bash
+./gradlew clean dokkaCustomFormat
+```
+
+---
+
+If you run any other `Dokka` task, such as `dokkaHtml`, you'll see vanilla `Dokka` without any alterations.
+This is because changes to configuration are applied only within `dokkaCustomFormat` task. This can be useful
+if you want to generate multiple versions of documentation with different configuration settings.
diff --git a/examples/gradle/dokka-customFormat-example/build.gradle.kts b/examples/gradle/dokka-customFormat-example/build.gradle.kts
index 965593b1..8f9b6d2e 100644
--- a/examples/gradle/dokka-customFormat-example/build.gradle.kts
+++ b/examples/gradle/dokka-customFormat-example/build.gradle.kts
@@ -20,6 +20,9 @@ repositories {
  */
 tasks.register<DokkaTask>("dokkaCustomFormat") {
     pluginConfiguration<org.jetbrains.dokka.base.DokkaBase, org.jetbrains.dokka.base.DokkaBaseConfiguration> {
+        // Dokka's stylesheets and assets with conflicting names will be overriden.
+        // In this particular case, logo-styles.css will be overriden and ktor-logo.png will
+        // be added as an additional image asset
         customStyleSheets = listOf(file("logo-styles.css"))
         customAssets = listOf(file("ktor-logo.png"))
     }
diff --git a/examples/gradle/dokka-customFormat-example/logo-styles.css b/examples/gradle/dokka-customFormat-example/logo-styles.css
index bde131cd..9558eb83 100644
--- a/examples/gradle/dokka-customFormat-example/logo-styles.css
+++ b/examples/gradle/dokka-customFormat-example/logo-styles.css
@@ -1,6 +1,20 @@
-#logo {
+/*
+ * All Margins and sizes are custom for the ktor-logo.png file.
+ * You may need to modify it and find what works best for your case.
+ */
+.library-name a {
+    position: relative;
+    margin-left: 55px;
+}
+
+.library-name a::before {
+    content: '';
     background-image: url('../images/ktor-logo.png');
+    background-repeat: no-repeat;
     background-size: 125px 50px;
-    padding-top: 12px;
-    height: 65px;
-}
\ No newline at end of file
+    position: absolute;
+    width: 52px;
+    height: 50px;
+    top: -18px;
+    left: -62px;
+}